unplugin vue route generator

A powerful route generator plugin for Vue.js applications using unplugin. This plugin automatically generates Vue Router routes based on your file-based routing structure.

Features

• Automatic route generation from file structure
• Support for dynamic routes
• TypeScript support
• Hot module replacement (HMR) support
• Customizable route configuration
• Integration with rspack/webpack/rollup build system

Installation

⚠️ vite and esbuild are not supported

1# Using pnpm
2pnpm add -D Unplugin-vue-gen-routes
3
4# Using npm
5npm install -D Unplugin-vue-gen-routes
6
7# Using yarn
8yarn add -D Unplugin-vue-gen-routes

Usage

1. Configure the plugin in your rsbuild configuration:

1import { defineConfig } from '@rsbuild/core'
2import { pluginVue } from '@rsbuild/plugin-vue'
3import VueGenRoutes from 'unplugin-vue-gen-routes/rspack'
4
5export default defineConfig({
6  plugins: [pluginVue()],
7  tools: {
8    rspack: {
9      plugins: [VueGenRoutes()],
10    },
11  },
12})
13

2. Add following line to your env.d.ts:

1/// <reference types="unplugin-vue-gen-routes/client" />

3. Create your Vue components following the file-based routing convention:

src/
  pages/
    index.vue        # / route
    about.vue        # /about route
    users/
      [id].vue       # /users/:id dynamic route
      index.vue      # /users route

4. Routes will be generated in src/router/routes.gen.ts you can import as you wish.

1import { createWebHistory, createRouter } from 'vue-router'
2
3import { routes } from './routes.gen'
4
5const router = createRouter({
6  history: createWebHistory(),
7  routes,
8})
9
10export default router

Configuration Options

The plugin accepts the following configuration options:

1interface Options {
2  // Output file for the generated routes, defaults to 'src/router/routes.gen.ts'
3  output?: string
4
5  // Directory to scan for routes, defaults to 'src/pages'
6  routesFolder?: RoutesFolder
7
8  // file extensions to scan for routes, defaults to ['vue']
9  extensions?: string[]
10
11  // exclude folder patterns for routes, support glob patterns, defaults to empty
12  exclude?: string[]
13
14  // file patterns to scan for routes, support glob patterns, defaults to ['**/*']
15  filePatterns?: string[]
16
17  // logging config, if set to false, no logs will be printed.
18  logs: false | 'debug' | 'info' | 'warn' | 'error'
19
20  // watch mode, defaults to true
21  watch?: boolean
22}

Development

1# Install dependencies
2pnpm install
3
4# Build the project
5pnpm build
6
7# Run tests
8pnpm test
9
10# Development mode with watch
11pnpm dev

License

MIT © pot-code

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

This plugin is inspired by unplugin-vue-router.