vite-plugin-generate-route

1.0.16 verified Mon Apr 27 auth: no javascript

Vite plugin for automatic Vue Router route generation based on file system structure. Version 1.0.16, actively maintained. Scans a specified directory for Vue components and metadata files to produce a routes file with lazy-loading imports. Supports nested routes, auto-redirects, and optional per-route metadata. Requires Vite >=3.0.0 and Node >=14. Differentiated by tight Vue Router integration and zero-config file-based routing.

Common errors

error ERR_REQUIRE_ESM: require() of ES Module not supported ↓

cause Using require() instead of import for the plugin.

fix

Change to 'import VitePluginGenerateRoute from 'vite-plugin-generate-route'' and ensure package.json has 'type': 'module'.

error Error: Cannot find module 'src/routes/generateRoutes.js' ↓

cause Routes file path is relative to project root but import path uses incorrect relative reference.

fix

Ensure the routesFile option is set to an absolute or correct relative path (e.g., 'src/routes/generateRoutes.js' and imported from a file at 'src/router/index.js' as './routes/generateRoutes').

Warnings

breaking vite-plugin-generate-route is ESM-only. Do not use require(). ↓

fix Use import statement. Change commonjs to ES module in vite.config.

gotcha Routes file is overwritten on each dev server start or build. Manual edits will be lost. ↓

fix Do not edit the output routes file directly. Adjust pageDir or configuration instead.

gotcha Route naming collisions: two files with same name in different directories will cause duplicate route names. ↓

fix Use unique file names or customize page.js to set explicit name via metadata.

deprecated Support for Vite 2.x was dropped in version 1.0.0. Using Vite 2.x will cause errors. ↓

fix Upgrade to Vite >=3.0.0.

Install

npm install vite-plugin-generate-route

yarn add vite-plugin-generate-route

pnpm add vite-plugin-generate-route

Imports

default

wrong

const VitePluginGenerateRoute = require('vite-plugin-generate-route')

correct

import VitePluginGenerateRoute from 'vite-plugin-generate-route'

ESM-only package. CommonJS require will fail with ERR_REQUIRE_ESM.

VitePluginGenerateRoute

wrong

import { VitePluginGenerateRoute } from 'vite-plugin-generate-route'

correct

import VitePluginGenerateRoute from 'vite-plugin-generate-route'

Default export, not named. Named import yields undefined.

VitePluginGenerateRoute (type)
```
import type { Options } from 'vite-plugin-generate-route'
```
TypeScript users can import Options type. Versions <1.0.10 did not export types.

Quickstart

Configures the plugin and uses generated routes in Vue Router setup.

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

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

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