---
name: vue-router3-to-router4
description: Use when upgrading routing from Vue Router 3 to Vue Router 4, including createRouter history setup, guard semantics, and route type changes.
enabled: false
source: github:JuanJoseGonGi/skills
imported-from: github:JuanJoseGonGi/skills
---

# Vue Router 3 to Router 4

## Overview

Use this skill to migrate router setup, guard patterns, and route APIs with minimal navigation regressions.

## Key Breaking Changes

- `new VueRouter(...)` -> `createRouter(...)`
- `mode` -> `history: createWebHistory/createWebHashHistory/createMemoryHistory`
- catch-all `*` route -> `/:pathMatch(.*)*`
- `onReady` -> `isReady()` promise
- `<router-view>` transition/keep-alive pattern changed to slot-based API
- `RouteConfig` -> `RouteRecordRaw` types

## Workflow

1. Migrate router construction
   - Replace class constructor with `createRouter`.
   - Move base path into history constructor.

2. Update route records and types
   - Replace deprecated type imports.
   - Update catch-all route syntax.

3. Migrate guards
   - Prefer return-based guards (`return true`, `return '/login'`) over `next` callback.
   - Keep `next` temporarily only for low-risk incremental migration.

4. Update app mount sequence
   - Await `router.isReady()` when needed for initial navigation consistency.

5. Update router-view wrappers
   - Use `<router-view v-slot="{ Component }">` pattern for transitions/keep-alive.

## Guard Migration Example

```ts
router.beforeEach((to) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.isLoggedIn) return "/login"
  return true
})
```

## Done Criteria

- Router compiles with Vue Router 4 APIs and types only.
- Navigation guards preserve all redirect/auth behavior.
- Catch-all and nested navigation behavior is verified.

## Common Pitfalls

- Forgetting to update catch-all route syntax.
- Assuming query/hash are part of active link matching like in v3 edge cases.
- Mixing legacy `next` with return-based style in the same guard chain.
