Automatic file based Routing in Vue with TS support ✨

• StackBlitz 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.

⚠️ This package is still experimental. If you found any issue, design flaw, or have ideas to improve it, please, open an issue or a Discussion.

npm i -D unplugin-vue-router

Add VueRouter plugin before Vue plugin:

// vite.config.ts import VueRouter from 'unplugin-vue-router/vite' export default defineConfig({ plugins: [ VueRouter({ /* options */ }), // ⚠️ Vue must be placed after VueRouter() Vue(), ], })

// rollup.config.js import VueRouter from 'unplugin-vue-router/rollup' export default { plugins: [ VueRouter({ /* options */ }), // ⚠️ Vue must be placed after VueRouter() Vue(), ], }

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

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

// esbuild.config.js import { build } from 'esbuild' import VueRouter from 'unplugin-vue-router/esbuild' build({ plugins: [VueRouter()], })

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

• 📖 Check more in the Documentation.

MIT