skills.rest
JuanJoseGonGi
JuanJoseGonGiCOMMUNITY
Explore all skills by this author →
𝕏@JuanJoseGonGiGitHub

vue-router3-to-router4

Migrate Vue Router 3 configurations to Vue Router 4 with createRouter and return-based guards.

Updated Aug 27, 2026
Search Tags:#frontend#javascript#vue#migration#upgrade#vue-router
One-click install
npx skills add https://github.com/JuanJoseGonGi/skills --skill vue-router3-to-router4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-router3-to-router4
Source: https://github.com/JuanJoseGonGi/skills/tree/main/vue-router3-to-router4
Command: npx skills add https://github.com/JuanJoseGonGi/skills --skill vue-router3-to-router4

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the complexities and breaking changes involved in migrating a Vue.js application's routing from Vue Router version 3 to version 4, ensuring a smooth transition of navigation logic and configurations.

Core Features & Use Cases

  • Router Construction Migration: Guides the switch from new VueRouter(...) to createRouter(...) and updates history modes.
  • Route Record and Guard Updates: Facilitates changes in route record types (RouteConfig to RouteRecordRaw) and navigation guard patterns (preferring return-based guards over next callbacks).
  • API Compatibility: Helps adapt to changes in router view transitions and keep-alive mechanisms.
  • Use Case: A development team is undertaking a major version upgrade of their Vue.js application and needs to migrate their existing Vue Router 3 setup to Vue Router 4, including all navigation guards and route definitions.

Quick Start

Use the vue-router3-to-router4 skill to migrate the router construction and update route records.

Frequently Asked Questions about vue-router3-to-router4

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Vue Router from v3 to v4?▼

To migrate Vue Router from v3 to v4, replace `new VueRouter(...)` with `createRouter(...)`, update history modes using `createWebHistory`, and change route record types to `RouteRecordRaw` for improved type safety and maintainability.

What changed for navigation guards in Vue Router 4?▼

Navigation guards in Vue Router 4 prefer return-based guards over `next` callbacks. This semantic change facilitates smoother navigation logic transitions by returning values directly instead of relying on explicit callback functions.

How do I update route record types when upgrading Vue Router?▼

When upgrading Vue Router, change your route record types from `RouteConfig` to `RouteRecordRaw`. This update adapts route definitions to the new v4 structure, ensuring better type safety across your application's navigation.

Does Vue Router 4 work with the old history mode configurations?▼

Vue Router 4 changes history mode configurations. You must transition to `createWebHistory` to replace the old v3 history modes, ensuring your application's base URL handling and navigation remain compatible.

What should I expect when migrating router view transitions to Vue Router 4?▼

Migrating router view transitions to Vue Router 4 requires adapting to API compatibility changes. This includes updating mechanisms for router view transitions and keep-alive to match the new version's structural and semantic requirements.

Related Skills

Explore More Software Engineering Skills→
edulazaroedulazaro
12

lc:check-foreign-keys

Analyzes Laravel migrations and Eloquent models to detect foreign key discrepancies.

Community
Advanced
AratKruglikAratKruglik
9

vue-routing

Configure Vue Router v4 patterns for Vue 3 applications.

Community
Intermediate
NKDShinKuNKDShinKu

vue-router-best-practices

Implement Vue Router 4 navigation guards in Vue 3 projects.

Community
Advanced
VIDLGVIDLG
4

webf-routing-setup

Configure hybrid routing for WebF apps with @openwebf/react-router or @openwebf/vue-router.

Official
Intermediate