# unplugin-vue-router
> File based typed routing for Vue Router
Latest version **0.19.2** (published 2025-12-29) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install unplugin-vue-router
pnpm add unplugin-vue-router
yarn add unplugin-vue-router
bun add unplugin-vue-router
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.19.2 |
| Published | 2025-12-29 |
| First published | 2022-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 17 |
| Unpacked size | 418.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2234 |
| Maintainers | posva |
| Keywords | unplugin, vite, webpack, rolldown, rollup, vue-router, pages, filesystem, types, typed, vue, nuxt, router |
## Links
- npm: https://www.npmjs.com/package/unplugin-vue-router
- Repository: https://github.com/posva/unplugin-vue-router
- Homepage: https://uvr.esm.is
- Issues: https://github.com/posva/unplugin-vue-router/issues
- npm.io page: https://npm.io/package/unplugin-vue-router
## Dependencies (17)
- [mlly](https://npm.io/package/mlly.md) ^1.8.0
- [yaml](https://npm.io/package/yaml.md) ^2.8.2
- [json5](https://npm.io/package/json5.md) ^2.2.3
- [pathe](https://npm.io/package/pathe.md) ^2.0.3
- [scule](https://npm.io/package/scule.md) ^1.3.0
- [chokidar](https://npm.io/package/chokidar.md) ^5.0.0
- [unplugin](https://npm.io/package/unplugin.md) ^2.3.11
- [local-pkg](https://npm.io/package/local-pkg.md) ^1.1.2
- [picomatch](https://npm.io/package/picomatch.md) ^4.0.3
- [tinyglobby](https://npm.io/package/tinyglobby.md) ^0.2.15
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.21
- [muggle-string](https://npm.io/package/muggle-string.md) ^0.4.1
- [unplugin-utils](https://npm.io/package/unplugin-utils.md) ^0.3.1
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.28.5
- [ast-walker-scope](https://npm.io/package/ast-walker-scope.md) ^0.8.3
- [@vue-macros/common](https://npm.io/package/@vue-macros/common.md) ^3.1.1
- [@vue/language-core](https://npm.io/package/@vue/language-core.md) ^3.2.1
## Alternatives
- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads
## Recent versions
- 0.19.2 (latest) — 2025-12-29
- 0.19.1 — 2025-12-15
- 0.19.0 — 2025-12-04
- 0.18.0 — 2025-11-28
- 0.17.2 — 2025-11-27
- 0.17.1 — 2025-11-21
- 0.17.0 — 2025-11-14
- 0.16.2 — 2025-11-14
- 0.16.1 — 2025-10-30
- 0.16.0 — 2025-10-14
- 0.15.0 — 2025-08-04
- 0.14.0 — 2025-06-29
- 0.13.0 — 2025-06-29
- 0.12.0 — 2025-03-04
- 0.11.2 — 2025-01-26
- … 70 more at https://npm.io/package/unplugin-vue-router/versions
## README
# unplugin-vue-router
[](https://www.npmjs.com/package/unplugin-vue-router) [](https://github.com/posva/unplugin-vue-router/actions/workflows/ci.yml) [](https://codecov.io/gh/posva/unplugin-vue-router)
> Automatic file based Routing in Vue with TS support ✨
- [StackBlitz Demo](https://stackblitz.com/github/posva/uvr-demo)
This build-time plugin simplifies your routing setup **and** makes it safer and easier to use thanks to TypeScript. Requires Vue Router >=4.4.0.
> [!WARNING]
> While unplugin-vue-router typed routing and file based routing is fundamentally stable, it contains other experimental APIs that are subject to change (e.g. Data Loaders). Make sure to check the relevant [Documentation](https://uvr.esm.is) for the latest information.
> If you find any issue, design flaw, or have ideas to improve it, please, open open an [issue](https://github.com/posva/unplugin-vue-router/issues/new/choose) or a [Discussion](https://github.com/posva/unplugin-vue-router/discussions).
## Install
```bash
npm i -D unplugin-vue-router
```
Add VueRouter plugin **before** Vue plugin:
Vite
```ts
// vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'
export default defineConfig({
plugins: [
VueRouter({
/* options */
}),
// ⚠️ Vue must be placed after VueRouter()
Vue(),
],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import VueRouter from 'unplugin-vue-router/rollup'
export default {
plugins: [
VueRouter({
/* options */
}),
// ⚠️ Vue must be placed after VueRouter()
Vue(),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-router/webpack')({
/* options */
}),
],
}
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-router/webpack')({
/* options */
}),
],
},
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import VueRouter from 'unplugin-vue-router/esbuild'
build({
plugins: [VueRouter()],
})
```
## Setup
After installing, **you should run your dev server** (usually `npm run dev`) **to generate the first version of the types**. Then you need to add the types to your `tsconfig.json`.
```json
{
"include": [
// ...
"./typed-router.d.ts"
],
// ...
"compilerOptions": {
// ...
"moduleResolution": "Bundler"
// ...
}
}
```
Then, if you have an `env.d.ts` file like the one created by `npm vue create `, add the `unplugin-vue-router/client` types to it:
```ts
// env.d.ts
///
///
```
If you don't have an `env.d.ts` file, you can create one and add the unplugin-vue-router types to it _or_ you can add them to the `types` property in your `tsconfig.json`:
```json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-router/client"]
}
}
```
Finally, import the generated routes from `vue-router/auto-routes` and pass them to the router:
```diff
import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
createRouter({
history: createWebHistory(),
// pass the generated routes written by the plugin 🤖
+ routes,
})
```
Alternatively, **you can also import the `routes` array** and create the router manually or pass it to some plugin. Here is an example with [Vitesse starter](https://github.com/antfu-collective/vitesse/blob/main/src/main.ts):
```diff
import { ViteSSG } from 'vite-ssg'
import { setupLayouts } from 'virtual:generated-layouts'
import App from './App.vue'
import type { UserModule } from './types'
-import generatedRoutes from '~pages'
+import { routes } from 'vue-router/auto-routes'
import '@unocss/reset/tailwind.css'
import './styles/main.css'
import 'uno.css'
-const routes = setupLayouts(generatedRoutes)
// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
App,
{
- routes,
+ routes: setupLayouts(routes),
base: import.meta.env.BASE_URL
},
(ctx) => {
// install all modules under `modules/`
Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
.forEach(i => i.install?.(ctx))
},
)
```
- [📖 Check more in the Documentation](https://uvr.esm.is).
## License
[MIT](http://opensource.org/licenses/MIT)
---
_Source: https://npm.io/package/unplugin-vue-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._