unplugin-vue-router

Zero-config File based type safe Routing

This build-time plugin simplifies your routing setup and makes it safer and easier to use thanks to TypeScript.

⚠️ 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.

Install

npm i unplugin-vue-router

// vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      /* options */
    }),
  ],
})

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

export default {
  plugins: [
    VueRouter({
      /* options */
    }),
  ],
}

// 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 */
      }),
    ],
  },
}

Then you can replace your imports from vue-router to @vue-router:

-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from '@vue-router'

createRouter({
  history: createWebHistory(),
  // You don't need to pass the routes anymore,
  // the plugin writes it for you 🤖
})

Make sure to also check the TypeScript section below if you are using TypeScript.

Configuration

Have a glimpse of all the existing configuration options with their corresponding default values:

VueRouter({
  // Folder(s) to scan for vue components and generate routes. Can be a string or an array of strings.
  routesFolder: 'src/routes'
  // Path for the generated types. Defaults to `./typed-router.d.ts` if typescript
  // is installed. Can be disabled by passing `false`.
  dts: './typed-router.d.ts',
})

TypeScript

This plugin generates a d.ts file with all the typing overrides. Make sure to include it in your tsconfig.json's include or files property:

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

Make sure to import from @vue-router to get access to the typed APIs instead of vue-router. You can commit the typed-router.d.ts file to your repository to make your life easier.

Rationale

This project idea came from trying to type the router directly using Typescript, finding out it's not fast enough to be pleasant to use and, ending up using build-based tools, taking some inspiration from other projects like:

• Nuxt - The Vue.js Framework
• vite-plugin-pages - Framework agnostic file based routing
• Typed Router for Nuxt - A module to add typed routing to Nuxt

License

MIT