Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2nthony/vue-auto-routes
🚦Future-Oriented vue routing system, support vue router next.
https://github.com/2nthony/vue-auto-routes
it-just-works nuxt plugin routes vue vue-router vue-router-next webpack webpack-plugin without-tears
Last synced: 8 days ago
JSON representation
🚦Future-Oriented vue routing system, support vue router next.
- Host: GitHub
- URL: https://github.com/2nthony/vue-auto-routes
- Owner: 2nthony
- License: mit
- Created: 2018-08-12T09:29:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:58:27.000Z (11 months ago)
- Last Synced: 2024-05-20T22:15:40.699Z (6 months ago)
- Topics: it-just-works, nuxt, plugin, routes, vue, vue-router, vue-router-next, webpack, webpack-plugin, without-tears
- Language: JavaScript
- Homepage:
- Size: 916 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
> 🚦Future-Oriented vue routing system
Please consider starring the project to show your ❤ and support.
[](https://npmjs.com/package/vue-auto-routes)
[](https://npmjs.com/package/vue-auto-routes)
[](https://circleci.com/gh/evillt/vue-auto-routes/tree/master)
[](./LICENSE)
[](https://patreon.com/evillt)
## Features
- Dynamic routing system `$id.vue`
- Support props mode `{id}.vue`
- Auto add new route to routes map, free you hands!
For details see [routing convertion](#routing-convertion)
## Install
```sh
yarn add vue-auto-routes
```
## Usage
We assume your directory looks like this:
```sh
src
└── views
├── index.vue
└── about.vue
webpack.config.js # basic webpack project
vue.config.js # create by vue/cli
```
In your `webpack.config.js`:
```js
const VueAutoRoutes = require('vue-auto-routes/plugin')
module.exports = {
plugins: [
new VueAutoRoutes({
dir: 'src/views'
})
]
}
```
Or in your `{poi,vue}.config.js`:
```js
const VueAutoRoutes = require('vue-auto-routes/plugin')
module.exports = {
chainWebpack(config) {
config.plugin('auto-routes').use(VueAutoRoutes, [
{
dir: 'src/views'
}
])
}
}
```
Then in your `router.js`:
```js
import { routes } from 'vue-auto-routes'
// v3
export default new VueRouter({ routes })
// v4
export const router = createRouter({
routes
})
```
## Routing Convertion
```js
// index.vue -> /
// about.vue -> /about
// user.vue -> /user
// user/index.vue -> /user, child ''
// user/friends.vue -> /user, child 'friends'
// catalog/index.vue -> /catalog
// catalog/specials.vue -> /catalog/specials
// $path.vue -> /:path
// _path.vue -> /:path // !!deprecated!!
// {path}.vue -> /:path props: true
// 404.vue -> *
```
# API
`new VueAutoRoutes(options)`
## options
Since `v1.1.11` options for [@ream/collect-fs-routes v1.0.2](https://github.com/ream/collect-fs-routes#api), but **differences** with these following
### dir
- Type: `string`
- Required: `true`
Routes directory, e.g. `src/views`.
### ~~next~~
- Deprecated
- Type: `boolean`
- Default: `false`
Now we recognize v4 automatically. Do not need this anymore.
Vue router next [See migration](https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes).
### ~~componentPrefix~~
### match
- Type: `string` `RegExp`
- Default: `'vue'` `/\.vue$/`
It used to match page components.
We use `,` to split match file extension when is a string.
### watchMode
- Type: `boolean`
- Default: `true` in `webpack-dev-server` and `webpack-dev-middleware`, `false` otherwise
Watching pages directory to auto update routes.
### default404
- Type: `boolean`
- Default: `true`
Use internal 404 page for mismatch route. You can create a `404.${match}` in your `dir` to instead of it or set it `false`.
# Other
[@ream/collect-fs-routes](https://github.com/ream/collect-fs-routes#optionsdir) Offical usage like.
```js
const {
collectRoutes,
renderRoutes
} = require('vue-auto-routes/lib/collect-fs-routes')
const routes = await collectRoutes(options)
const routesString = renderRoutes(routes)
```
Options for [options](#options)
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**vue-auto-routes** © [evillt](https://github.com/evillt), Released under the [MIT](./LICENSE) License.
Authored and maintained by **EVILLT** with help from contributors ([list](https://github.com/evillt/vue-auto-routes/contributors)).
> [evila.me](https://evila.me) · GitHub [@evillt](https://github.com/evillt) · Twitter [@evillt](https://twitter.com/evillt)