https://github.com/zclzone/vite-plugin-generoutes
A Vite plugin that generates routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.
https://github.com/zclzone/vite-plugin-generoutes
Last synced: 3 months ago
JSON representation
A Vite plugin that generates routes based on the file structure, supports dynamic routes, and supports custom meta data for each route.
- Host: GitHub
- URL: https://github.com/zclzone/vite-plugin-generoutes
- Owner: zclzone
- License: mit
- Created: 2024-06-15T15:17:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-14T08:25:11.000Z (3 months ago)
- Last Synced: 2026-01-14T12:16:46.220Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 328 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-generoutes
A Vite plugin that automatically generates Vue router configuration based on file system.
### π Prerequisites
- **Node.js**: `20.12.0` or higher
### β¨ Features
- π File-system based routing
- π Dynamic and nested routes support
- π οΈ Hot reload - routes update when files change
- π¨ Customizable route configuration
- 𧩠Support for route metadata via `defineOptions`
- π¦ Route redirection support
- πΌοΈ Layout-based route grouping
### π¦ Installation
```bash
# npm
npm install vite-plugin-generoutes -D
# yarn
yarn add vite-plugin-generoutes -D
# pnpm
pnpm add vite-plugin-generoutes -D
```
### π¨ Usage
Configure the plugin in your `vite.config.js`:
```javascript
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import generoutes from 'vite-plugin-generoutes'
export default defineConfig({
plugins: [
vue(),
generoutes({
// options
})
]
})
```
### βοΈ Configuration Options
| Option | Type | Default | Description |
| --------------- | ---------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
| `pagesFolder` | `string` | `'src/pages'` | Path to pages folder |
| `layoutsFolder` | `string` | `'src/layouts'` | Path to layouts folder |
| `ignoreFolders` | `string[]` | `['components']` | Folders to ignore when generating routes |
| `routesPath` | `string` | Auto-detected | Path to generated routes file. Auto-detected based on `tsconfig.json` presence (`.ts` if exists, otherwise `.js`) |
### π TypeScript Support
This plugin has first-class TypeScript support:
- **Auto-detection**: Automatically detects TypeScript projects by checking for `tsconfig.json`
- **Type definitions**: When generating routes for TypeScript projects, the plugin automatically includes type definitions for `RouteMeta` and `GeneratedRoute`
- **Route typing**: Generated routes are properly typed with `RouteRecordRaw` from `vue-router`
### π Routing Conventions
#### Basic Routes
- `src/pages/index.vue` -> `/`
- `src/pages/about.vue` -> `/about`
- `src/pages/users/index.vue` -> `/users`
- `src/pages/users/profile.vue` -> `/users/profile`
#### Dynamic Routes
- `src/pages/users/[id].vue` -> `/users/:id`
- `src/pages/users/[...all].vue` -> `/users/:pathMatch(.*)*`
- `src/pages/[org]/[repo].vue` -> `/:org/:repo`
#### Virtual Directories
- Paths with parentheses in the filename are treated as virtual directories. The parenthesized part will be omitted in the generated route path.
- For example: `src/pages/(auth)/login.vue` -> `/login`
### π§ Custom Routes
You can use `defineOptions` in your Vue files to customize route configuration:
```vue
defineOptions({
name: 'CustomRouteName',
meta: {
title: 'Page Title',
icon: 'home',
requiresAuth: true,
enabled: true // Set to false to exclude this route
},
redirect: '/other-route' // Set redirection
})
```
### π² Nested Routes
Use the `parent` property to set nested route relationships (handled automatically):
```vue
defineOptions({
name: 'ChildRoute',
parent: 'ParentRouteName',
meta: {
title: 'Child Route'
}
})
```
### οΏ½οΈ Layout Routes
Routes are automatically grouped by their `meta.layout` property and wrapped with a parent layout route:
- Routes with `meta.layout: false` will **not** be wrapped with a layout
- Routes without `meta.layout` will use the `'default'` layout by default
- Routes with `meta.layout: 'xxx'` will use the corresponding layout component from `layoutsFolder`
```vue
defineOptions({
name: 'Login',
meta: {
layout: false
}
})
```
```vue
defineOptions({
name: 'Home',
meta: {
layout: 'admin'
}
})
```
**Generated route structure example:**
```javascript
[
// Routes with layout: false are not wrapped
{
name: 'Login',
path: '/login',
component: () => import('/src/pages/login.vue'),
meta: { layout: false }
},
// Routes are grouped by layout
{
name: 'LAYOUT_DEFAULT',
path: '/__layout_default__',
component: () => import('/src/layouts/default.vue'),
children: [
{ name: 'Index', path: '/' }
]
},
{
name: 'LAYOUT_ADMIN',
path: '/__layout_admin__',
component: () => import('/src/layouts/admin.vue'),
children: [
{ name: 'Home', path: '/home' }
]
}
]
```
### οΏ½π Complete Example
```javascript
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import generoutes from 'vite-plugin-generoutes'
export default defineConfig({
plugins: [
vue(),
generoutes({
pagesFolder: 'src/views',
ignoreFolders: ['components', 'assets'],
routesPath: 'src/router/routes.js'
})
]
})
```
### π‘ Troubleshooting
**Issue**: Route path shows error: *Cannot find module "/src/pages/xxx.vue" or its corresponding type declarations.* Unable to navigate to the file with F12.
**Solution**: Add the following configuration to the `compilerOptions` in your `jsconfig.json` or `tsconfig.json`:
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"/src/*": ["src/*"]
}
}
}
```
[δΈζζζ‘£](./README.zh_CN.md)