v5.0.1

   🐞 Bug Fixes

• volar: Make typed plugin work with vue-tsc  -  by @peter50216 in #2607 (7845e)

    View changes on GitHub

v5.0.0

Vue Router 5 is a boring release, it merges unplugin-vue-router into the core package with no breaking changes. The only exception is that the iife build no longer includes @vue/devtools-api because it has been upgraded to v8 and does not expose an IIFE build itself. You can track that change in this issue. See the migration guide for instructions on how to upgrade from unplugin-vue-router to Vue Router 5.

   🚀 Features

• experimental: Query params are optional by default  -  by @posva (78913)
• Add volar plugins  -  by @posva (530ac)
• Add data loaders as experimental  -  by @posva (ab895)
• Add route json schema  -  by @posva (20675)
• Upgrade devtools-api to v7  -  by @posva (17b84)
• Upgrade devtools to v8  -  by @posva (b8aa2)
• Runtime error on missing param parsers  -  by @posva (3444b)
• volar: Allow rootDir option  -  by @posva (df65a)

   🐞 Bug Fixes

• Avoid breaking older browsers support  -  by @posva (c7ba4)
• Trigger navigation guards when keep-alive component is reactivated for different route  -  by @babu-ch and @posva in #2604 (c7735)
• Add automatic types for param parsers  -  by @posva (0fb5d)
• Param parsers when dts is not at root  -  by @posva (16b39)
• Expose resolveOptions for unplugin  -  by @posva (35543)
• Escape tildes in paths  -  by @posva (aac2e)
• volar: Upgrade config read  -  by @posva (e3024)

    View changes on GitHub

v5.0.0-beta.2

   🚀 Features

• Runtime error on missing param parsers  -  by @posva (26e30)
• volar: Allow rootDir option  -  by @posva (237b5)

   🐞 Bug Fixes

• Expose resolveOptions for unplugin  -  by @posva (812b5)
• volar: Upgrade config read  -  by @posva (73398)

    View changes on GitHub

v5.0.0-beta.1

   🚨 Breaking Changes

• experimental: Query params are optional by default  -  by @posva (7f000)

   🚀 Features

• Add volar plugins  -  by @posva (83ff0)
• Add data loaders as experimental  -  by @posva (39476)
• Add route json schema  -  by @posva (0fa92)
• Upgrade devtools-api to v7  -  by @posva (2039c)
• Upgrade devtools to v8  -  by @posva (88352)

   🐞 Bug Fixes

• Avoid breaking older browsers support  -  by @posva (c7ba4)
• Trigger navigation guards when keep-alive component is reactivated for different route  -  by @babu-ch and @posva in #2604 (c7735)
• Add automatic types for param parsers  -  by @posva (9f1f0)
• Param parsers when dts is not at root  -  by @posva (b6f00)

    View changes on GitHub

v5.0.0-beta.0

Vue Router 5 merges unplugin-vue-router into the core package. It has no breaking changes itself, so you should be able to upgrade it no matter if you use unplugin-vue-router or Vue Router 4 without file-based routing, and everything should just work. If not, please open an issue!

Note

If you are not using unplugin-vue-router, there are no breaking changes affecting you

---

Migrating from unplugin-vue-router

If you're already using unplugin-vue-router, migration is mostly import changes.

Migration Checklist (unplugin-vue-router)

This is the TLDR version of the steps below:

• Remove unplugin-vue-router dependency
• Update vue-router to v5
• Change plugin import: unplugin-vue-router/vite → vue-router/vite
• Change data loader imports: unplugin-vue-router/data-loaders/* → vue-router/experimental
• Change utility imports: unplugin-vue-router → vue-router/unplugin
• Change Volar plugins: unplugin-vue-router/volar/* → vue-router/volar/*
• Remove unplugin-vue-router/client from tsconfig / env.d.ts

1. Update Dependencies

pnpm remove unplugin-vue-router
pnpm update vue-router@5

2. Update Imports

Vite plugin:

// Before
import VueRouter from 'unplugin-vue-router/vite'

// After
import VueRouter from 'vue-router/vite'

Other build tools (Webpack, Rollup, esbuild) import from vue-router/unplugin:

import VueRouter from 'vue-router/unplugin'

VueRouter.webpack({
  /* ... */
})
VueRouter.rollup({
  /* ... */
})
// etc.

Data loaders:

// Before
import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'

// After
import { defineBasicLoader, DataLoaderPlugin } from 'vue-router/experimental'
import { defineColadaLoader } from 'vue-router/experimental/pinia-colada'

Unplugin utilities (for custom integrations):

// Before
import {
  VueRouterAutoImports,
  EditableTreeNode,
  createTreeNodeValue,
  createRoutesContext,
  getFileBasedRouteName,
  getPascalCaseRouteName,
} from 'unplugin-vue-router'

// After
import {
  VueRouterAutoImports,
  EditableTreeNode,
  createTreeNodeValue,
  createRoutesContext,
  getFileBasedRouteName,
  getPascalCaseRouteName,
} from 'vue-router/unplugin'

Types:

// Before
import type { Options, EditableTreeNode } from 'unplugin-vue-router'

// After
import type { Options, EditableTreeNode } from 'vue-router/unplugin'

Volar plugins:

// Before (tsconfig.json)
{
  "compilerOptions": {
    // needed for the volar plugin
    "rootDir": "."
  },
  "vueCompilerOptions": {
    "plugins": [
      "unplugin-vue-router/volar/sfc-typed-router",
      "unplugin-vue-router/volar/sfc-route-blocks"
    ]
  }
}

// After
{
  "compilerOptions": {
    // needed for the volar plugin
    "rootDir": "."
  },
  "vueCompilerOptions": {
    "plugins": [
      "vue-router/volar/sfc-typed-router",
      "vue-router/volar/sfc-route-blocks"
    ]
  }
}

These enable automatic typing useRoute() when using file-based routing:

<!-- src/pages/users/[id].vue -->
<script setup lang="ts">
// Before: had to pass route name for typing
const route = useRoute('/users/[id]')

// After: automatically typed based on file location!
const route = useRoute()
route.params.id // ✅ typed as string
</script>

<template>
  <!-- $route is also automatically typed -->
  <p>User ID: {{ $route.params.id }}</p>
</template>

3. Update tsconfig.json

Remove the old client types reference. These were either added to an env.d.ts:

-/// <reference types="unplugin-vue-router/client" />

or to your tsconfig.json:

// Before
{
  "include": ["./typed-router.d.ts", "unplugin-vue-router/client"]
}

// After
{
  "include": ["./typed-router.d.ts"]
}

It's also recommended to remove the ./typed-router.d.ts from your tsconfig.json and place it inside src/, as it's automatically included by most setups:

// vite.config.ts
export default defineConfig({
  plugins: [
    VueRouter({
      dts: 'src/routes.d.ts',
    }),
    Vue(),
  ],
})

This will be the default in a future version.

    View changes on GitHub

v4.6.4

   🚀 Features

• experimental:
  • Handle redirect types  -  by @posva (92efb)
  • Basic alias  -  by @posva (ded2d)

   🐞 Bug Fixes

• Make the build output compatible with v4.5  -  by @drylint in #2591 (42bc2)
• experimental: IsActive with custom params  -  by @posva (edca6)

    View changes on GitHub

v4.6.3

Please refer to CHANGELOG.md for details.

v4.6.2

Please refer to CHANGELOG.md for details.

v4.6.1

Please refer to CHANGELOG.md for details.

v4.6.0

Please refer to CHANGELOG.md for details.