Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ktsn/vue-route-generator
Vue Router route config generator
https://github.com/ktsn/vue-route-generator
generator routing vue-router vuejs
Last synced: 3 days ago
JSON representation
Vue Router route config generator
- Host: GitHub
- URL: https://github.com/ktsn/vue-route-generator
- Owner: ktsn
- License: mit
- Created: 2018-07-13T11:29:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-18T03:53:31.000Z (almost 2 years ago)
- Last Synced: 2024-12-16T18:29:35.230Z (about 2 months ago)
- Topics: generator, routing, vue-router, vuejs
- Language: TypeScript
- Size: 1.77 MB
- Stars: 151
- Watchers: 2
- Forks: 27
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-route-generator
[Vue Router](https://github.com/vuejs/vue-router) route config generator.
You may want to use [vue-auto-routing](https://github.com/ktsn/vue-auto-routing) for auto generating routing or [vue-cli-plugin-auto-routing](https://github.com/ktsn/vue-cli-plugin-auto-routing) which includes all useful features on routing.
## Overview
This tool generates a JavaScript code that exporting Vue Router's `routes` config by reading your Vue components directory.
For example, when you have following file structure:
```
pages/
├── index.vue
├── users.vue
└── users/
└── _id.vue
```
Then run the following script:
```js
const { generateRoutes } = require('vue-route-generator')
const code = generateRoutes({
pages: './pages' // Vue page component directory
})
console.log(code)
```
vue-route-generator will generate like the following code (beautified the indentations etc.):
```js
export default [
{
name: 'index',
path: '/',
component: () => import('@/pages/index.vue')
},
{
name: 'users',
path: '/users',
component: () => import('@/pages/users.vue'),
children: [
{
name: 'users-id',
path: ':id',
component: () => import('@/pages/users/_id.vue')
}
]
}
]
```
You can save the code and include router instance:
```js
const fs = require('fs')
const { generateRoutes } = require('vue-route-generator')
const code = generateRoutes({
pages: './pages'
})
fs.writeFileSync('./router/routes.js', code)
```
```js
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// import generated routes
import routes from './routes'
Vue.use(Router)
export default new Router({
routes
})
```
## Routing
The routing is inspired by [Nuxt routing](https://nuxtjs.org/guide/routing) and is implemented with the same functionality.
### Partials
Directories and files started and ended with `__` (two underscores, e.g. `__foo__.vue`) will be ignored. You can use them as partial components which will be used in some page components.
## Route Custom Block
If the components have `` custom block, its json content will be merged into the generated route record.
For example, if `index.vue` has the following `` block:
```vue
{
"name": "home",
"meta": {
"requiresAuth": true
}
}
Hello
```
The generated route config is like following:
```js
module.exports = [
{
name: 'home', // Overwritten by block's name field.
path: '/',
component: () => import('@/pages/index.vue'),
// Added by block's meta field.
meta: {
requiresAuth: true
}
}
]
```
## Syntax Highlighting
To enable syntax highlighting in VS Code using [Vetur's Custom Code Blocks](https://vuejs.github.io/vetur/highlighting.html#custom-block) add the following snippet to your preferences...
```
"vetur.grammar.customBlocks": {
"route": "json"
}
```
## References
### `generateRoutes(config: GenerateConfig): string`
`GenerateConfig` has the following properties:
- `pages`: Path to the directory that contains your page components.
- `importPrefix`: A string that will be added to importing component path (default `@/pages/`).
- `dynamicImport`: Use dynamic import expression (`import()`) to import component (default `true`).
- `chunkNamePrefix`: Prefix for each route chunk name (only available when `dynamicImport: true`).
- `nested`: If `true`, generated route path will be always treated as nested. (e.g. will generate `path: 'foo'` rather than `path: '/foo'`)
## Related Projects
- [vue-cli-plugin-auto-routing](https://github.com/ktsn/vue-cli-plugin-auto-routing): Vue CLI plugin including auto pages and layouts resolution.
- [vue-router-layout](https://github.com/ktsn/vue-router-layout): Lightweight layout resolver for Vue Router.
- [vue-auto-routing](https://github.com/ktsn/vue-auto-routing): Generate Vue Router routing automatically.
## License
MIT