unplugin-vue-router

What is unplugin-vue-router?

unplugin-vue-router is a plugin for Vue.js that provides enhanced routing capabilities. It simplifies the process of defining and managing routes in a Vue.js application, offering features like automatic route generation, route guards, and more.

What are unplugin-vue-router's main functionalities?

Automatic Route Generation

This feature allows you to automatically generate routes based on the file structure of your project. It simplifies the process of setting up routes by eliminating the need to manually define each route.

```javascript
import { createRouter, createWebHistory } from 'vue-router';
import routes from 'virtual:generated-pages';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
```

Route Guards

Route guards are used to protect certain routes based on conditions such as authentication status. This feature allows you to define global or per-route guards to control access to different parts of your application.

```javascript
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next({ name: 'login' });
  } else {
    next();
  }
});
```

Dynamic Routing

Dynamic routing allows you to define routes with dynamic segments, such as user IDs. This feature is useful for creating routes that depend on variable parameters.

```javascript
const routes = [
  { path: '/user/:id', component: UserComponent }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
```

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.

README

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

Changelog

0.0.5 (2022-06-27)

Features

• handle unnested routes (f52304d)