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

Starter template for unplugin.

Template Usage

To use this template, clone it down using:

npx degit antfu/unplugin-vue-router my-unplugin

And do a global replace of unplugin-vue-router with your plugin name.

Then you can start developing your unplugin 🔥

To test your plugin, run: pnpm run dev To release a new version, run: pnpm run release

Install

npm i unplugin-vue-router

Vite

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

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

Example: playground/

Rollup

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

export default {
  plugins: [
    Starter({ /* 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 */ }),
    ],
  },
}

Changelog

0.0.1 (2022-06-24)

Features

• setup chokidar watcher (15f217f)