vite-plugin-generate-route

A Vite plugin that automatically generates Vue Router routes based on file structure.

Features

• 📁 File-based routing with nested support
• 🎯 Metadata via page.js files
• 🌲 Automatic route tree generation
• 🔄 Auto-redirect for parent routes
• ⚡ Lazy loading with dynamic imports
• 🔧 Works with Vite & Webpack

Installation

npm install vite-plugin-generate-route

Requirements

• Vite >= 3.0.0
• Node.js >= 14.0.0

Quick Start

1. Configure plugin

// vite.config.js
import { defineConfig } from 'vite'
import VitePluginGenerateRoute from 'vite-plugin-generate-route'

export default defineConfig({
  plugins: [
    VitePluginGenerateRoute({
      pageDir: 'src/views',
      routesFile: 'src/routes/generateRoutes.js'
    })
  ]
})

2. Create page structure

src/views/
├── home/
│   ├── index.vue
│   └── page.js
├── user/
│   ├── index.vue
│   ├── page.js
│   └── profile/
│       ├── index.vue
│       └── page.js

3. Add metadata (optional)

// src/views/home/page.js
export default {
  title: 'Home',
  requiresAuth: false
}

4. Use generated routes

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes/generateRoutes'

export default createRouter({
  history: createWebHistory(),
  routes
})

How It Works

The plugin scans your pageDir for:

• page.js - Route metadata
• index.vue - Route component

Generates routes with:

• Dynamic imports for lazy loading
• Nested structure based on folders
• Auto-redirect to first child route

Example output:

export default [
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home/index.vue'),
    meta: { title: 'Home' }
  }
];

Configuration

| Option | Type | Default | Description | |--------------|----------|----------------------------------|------------------------------| | pageDir | string | 'src/views' | Directory to scan for pages | | routesFile | string | 'src/routes/generateRoutes.js' | Output file path |

Advanced Usage

Custom redirect:

// page.js
export default {
  redirect: '/custom/path'
}

Nested routes:

Routes automatically nest based on folder structure. Parent routes with children get auto-redirect to the first child unless redirect is specified in metadata.

License

MIT