unplugin-vue-router

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

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

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

Example: playground/

Rollup

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

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

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

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

Similar packages

Other packages similar to unplugin-vue-router

vue-router

vue-router is the official router for Vue.js. It provides a comprehensive set of features for routing in Vue.js applications, including nested routes, route guards, and dynamic routing. Compared to unplugin-vue-router, vue-router requires more manual setup for route definitions but offers a high level of customization.

vite-plugin-pages

vite-plugin-pages is a Vite plugin that automatically generates routes based on the file structure of your project. It is similar to unplugin-vue-router in that it simplifies route management, but it is specifically designed to work with Vite, a build tool that is often used with Vue.js.