Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ktsn/vue-cli-plugin-auto-routing
Automatically resolve pages and layouts routing
https://github.com/ktsn/vue-cli-plugin-auto-routing
auto-generate routing vue-cli-plugin vue-router vuejs
Last synced: 6 days ago
JSON representation
Automatically resolve pages and layouts routing
- Host: GitHub
- URL: https://github.com/ktsn/vue-cli-plugin-auto-routing
- Owner: ktsn
- License: mit
- Created: 2018-07-14T11:15:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T17:56:52.000Z (almost 2 years ago)
- Last Synced: 2024-12-09T17:21:43.647Z (13 days ago)
- Topics: auto-generate, routing, vue-cli-plugin, vue-router, vuejs
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 296
- Watchers: 5
- Forks: 23
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-cli-plugin-auto-routing
[](https://devtoken.rocks/package/vue-cli-plugin-auto-routing)
Vue CLI plugin that provides auto routing feature.
## Overview
Ensure you are in a project generated by Vue CLI >= v3. You install this plugin by running the following command:
```bash
# If you did not install router plugin yet
$ vue add router
# Install vue-cli-plugin-auto-routing
$ vue add auto-routing
```
After adding the plugin, the file structure will be the below.
```
src/
├── pages/
├── layouts/
└── router/
```
### Pages
`.vue` files under the `pages/` directory will be automatically resolved to generate routing. Vue Router `routes` options will be configured with the file structure under the `pages/`. The generated routing is same with [Nuxt's routing](https://nuxtjs.org/guide/routing).
Note that directories and files started and ended with `__` (two underscores, e.g. `__foo__.vue`) will be ignored.
For example, when you have the following page components:
```
pages/
├── __partial__.vue
├── index.vue
├── users.vue
└── users/
└── _id.vue
```
It is resolved to the below routes. Note that `_` prefixed components generate dynamic routing.
```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')
}
]
}
]
```
If you want to make route param required, create a directory for the param and add `index.vue` in the directory. In the above example, if you replace `users/_id.vue` with `users/_id/index.vue`, `:id` param will be required.
#### `` custom block
If a page component has `` custom block, the content json will be merged with [route config](https://router.vuejs.org/api/#routes).
For example, if `index.vue` has the following `` block:
```vue
{
"name": "home",
"meta": {
"requiresAuth": true
}
}
Hello
```
The generated route config is like the following:
```js
module.exports = [
{
name: 'home',
path: '/',
component: () => import('@/pages/index.vue'),
meta: {
requiresAuth: true
}
}
]
```
### Layouts
Components under the `layouts/` directory will be used as shared layout component in the application. You can choose a layout by specifying `layout` component option in a page component. The default value of `layout` is `'default'`. That means when you omit `layout` options, `layouts/default.vue` will be choosed as the layout component. This is the same concept with [Nuxt's layouts](https://nuxtjs.org/guide/views#layouts).
For example, when you have `layouts/foo.vue` and `pages/index.vue`:
```vue
Foo Layout
```
```vue
index.vue
export default {
// You can specify layout component name here (default value is 'default')
layout: 'foo'
}
```
The following html will be rendered:
```html
Foo Layout
index.vue
```
## Modifying Chunk Name
A chunk name from auto generated file can be conflicted with your code. You may see the below error log in that case:
```
ERROR Failed to compile with 1 errors
error in ./node_modules/vue-auto-routing/index.js
It's not allowed to load an initial chunk on demand. The chunk name "index" is already used by an entrypoint.
ERROR Build failed with errors.
error Command failed with exit code 1.
```
To avoid this error, you can set `chunkNamePrefix` option to change the auto generated chunk name.
```js
// vue.config.js
module.exports = {
pluginOptions: {
autoRouting: {
// Specify a prefix which will be added to all auto generated chunk name.
chunkNamePrefix: 'page-'
}
}
}
```
## Options
You can specify options for this plugin under `pluginOptions.autoRouting` in `vue.config.js`. The options are simply passed to `vue-auto-routing` options.
You can see the available options list [here](https://github.com/ktsn/vue-route-generator#generateroutesconfig-generateconfig-string).
```js
// vue.config.js
module.exports = {
pluginOptions: {
autoRouting: {
// Optionally specify a custom output file, relative to the project root
outFile: "src/router/routes.js",
// Specify other vue-auto-routing options here
nested: false
}
}
}
```
## Related Projects
- [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.
- [vue-route-generator](https://github.com/ktsn/vue-route-generator): Low-level utility generating routing (used by vue-auto-routing under the hood).
## License
MIT