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

# Using pnpm
pnpm add -D Unplugin-vue-gen-routes

# Using npm
npm install -D Unplugin-vue-gen-routes

# Using yarn
yarn add -D Unplugin-vue-gen-routes

Usage

1. Configure the plugin in your rsbuild configuration:

import { defineConfig } from '@rsbuild/core'
import { pluginVue } from '@rsbuild/plugin-vue'
import VueGenRoutes from 'unplugin-vue-gen-routes/rspack'

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [VueGenRoutes()],
    },
  },
})

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

/// <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.

import { createWebHistory, createRouter } from 'vue-router'

import { routes } from './routes.gen'

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

export default router

Configuration Options

The plugin accepts the following configuration options:

interface Options {
  // Output file for the generated routes, defaults to 'src/router/routes.gen.ts'
  output?: string

  // Directory to scan for routes, defaults to 'src/pages'
  routesFolder?: RoutesFolder

  // file extensions to scan for routes, defaults to ['vue']
  extensions?: string[]

  // exclude folder patterns for routes, support glob patterns, defaults to empty
  exclude?: string[]

  // file patterns to scan for routes, support glob patterns, defaults to ['**/*']
  filePatterns?: string[]

  // logging config, if set to false, no logs will be printed.
  logs: false | 'debug' | 'info' | 'warn' | 'error'

  // watch mode, defaults to true
  watch?: boolean
}

Development

# Install dependencies
pnpm install

# Build the project
pnpm build

# Run tests
pnpm test

# Development mode with watch
pnpm 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.