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, flow, or have ideas to improve it, please, open an issue.

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

Nuxt

// nuxt.config.js
export default {
  buildModules: [
    [
      'unplugin-vue-router/nuxt',
      {
        /* options */
      },
    ],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

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

Rationale

This project idea came from trying to type the router directly using Typescript, finding it out it's not fast enough to be pleasant to use and recurring to 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.1.0 (2022-08-09)

Bug Fixes

• deep merge meta properties (47bce4f)
• expose options subpath (#42) (b44c32e)
• handle nested loaders that were already called (6887fb2)
• reload the page during dev when no cache entry is available (918bfd0)
• support older browsers with object.assign (66c7ae0)
• trigger loaders only once when nested (4a13819)

Code Refactoring

• rename [@vue-router](https://github.com/vue-router) to vue-router/auto (461530a)

Features

• add basic data loaders (9c19fd2)
• add lazy loaders (815f875)
• add pendingLoad (055bc3c)
• allow enabling experimental data fetching (1b7e6b3)
• change default route component folder to src/pages (6d6cb13)
• implement nested sequential loaders (6d5201f)
• track hash reads (e5583a4)

BREAKING CHANGES

• the module name is now vue-router/auto instead of @vue-router. To upgrade to this version you only need to replace it:

  -import { ... } from '@vue-router'
  +import { ... } from 'vue-router/auto'
  
  -import { ... } from '@vue-router/routes'
  +import { ... } from 'vue-router/auto/routes'
  

  This allows stubbing the package in vue-router to hint the user towards this plugin.

• the default value of routesFolder is changed from src/routes to src/pages. If you didn't change this setting, you will have to either:

  • rename your src/routes folder to src/pages
  • add routesFolder: 'src/routes' to the options of the plugin in your vite, webpack, etc config