unplugin-vue-router

File based typed routing for Vue Router

MIT 85 个版本
unplugin vite webpack rolldown rollup vue-router pages filesystem types typed vue nuxt router
主页
仓库
提交 Issue
安装
npm install unplugin-vue-router
yarn add unplugin-vue-router
pnpm add unplugin-vue-router
bun add unplugin-vue-router
README

unplugin-vue-router

NPM version ci status codecov

Automatic file based Routing in Vue with TS support ✨

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 for the latest information. If you find any issue, design flaw, or have ideas to improve it, please, open open an issue or a Discussion.

Install

npm i -D unplugin-vue-router

Add VueRouter plugin before Vue plugin:

Vite
// 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/


Rollup
// rollup.config.js
import VueRouter from 'unplugin-vue-router/rollup'

export default {
  plugins: [
    VueRouter({
      /* options */
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
}


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-router/webpack')({
      /* options */
    }),
  ],
}


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-router/webpack')({
        /* options */
      }),
    ],
  },
}


esbuild
// 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.

{
  "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 <my-project>, add the unplugin-vue-router/client types to it:

// env.d.ts
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

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:

{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-router/client"]
  }
}

Finally, import the generated routes from vue-router/auto-routes and pass them to the router:

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:

 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))
   },
 )

License

MIT

版本列表
0.19.2 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
0.11.1 2025-01-21
0.11.0 2025-01-21
0.10.9 2024-12-04
0.10.8 2024-09-08
0.10.7 2024-08-17
0.10.6 2024-08-15
0.10.5 2024-08-15
0.10.4 2024-08-14
0.10.3 2024-08-12
0.10.2 2024-07-30
0.10.1 2024-07-22
0.10.0 2024-06-21
0.9.1 2024-06-07
0.9.0 2024-05-28
0.8.8 2024-05-22
0.8.7 2024-05-20
0.8.6 2024-04-12
0.8.5 2024-03-14
0.8.4 2024-02-24
0.8.3 2024-02-22
0.8.2 2024-02-22
0.8.1 2024-02-22
0.8.0 2024-02-22
0.7.0 2023-09-22
0.6.4 2023-05-09
0.6.3 2023-05-02
0.6.2 2023-05-01
0.6.1 2023-05-01
0.6.0 2023-05-01
0.5.5 2023-04-18
0.5.4 2023-03-02
0.5.3 2023-03-02
0.5.2 2023-03-02
0.5.1 2023-03-01
0.5.0 2023-02-16
0.4.1 2023-02-16
0.4.0 2023-02-16
0.3.3 2023-02-15
0.3.2 2023-01-09
0.3.1 2023-01-08
0.3.0 2023-01-03
0.2.3 2022-10-05
0.2.2 2022-09-30
0.2.1 2022-08-27
0.2.0 2022-08-26
0.1.2 2022-08-10
0.1.1 2022-08-09
0.1.0 2022-08-09
0.0.21 2022-07-12
0.0.20 2022-07-07
0.0.19 2022-07-07
0.0.18 2022-07-07
0.0.17 2022-07-06
0.0.16 2022-07-06
0.0.15 2022-07-05
0.0.14 2022-07-05
0.0.13 2022-07-05
0.0.12 2022-07-04
0.0.11 2022-07-04
0.0.10 2022-07-04
0.0.9 2022-07-01
0.0.8 2022-06-29
0.0.7 2022-06-28
0.0.6 2022-06-27
0.0.5 2022-06-27
0.0.4 2022-06-24
0.0.3 2022-06-24
0.0.2 2022-06-24
0.0.1 2022-06-24
0.0.0-beta.0 2022-06-16