# vue-route-generator

> Vue Router route config generator

Latest version **1.0.0** (published 2021-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-route-generator
pnpm add vue-route-generator
yarn add vue-route-generator
bun add vue-route-generator
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-01-06 |
| First published | 2018-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 150 |
| Author | katashin |
| Maintainers | ktsn |
| Keywords | Vue, Vue Router, routing, generator |

## Links

- npm: https://www.npmjs.com/package/vue-route-generator
- Repository: https://github.com/ktsn/vue-route-generator
- Issues: https://github.com/ktsn/vue-route-generator/issues
- npm.io page: https://npm.io/package/vue-route-generator

## Dependencies (2)

- [prettier](https://npm.io/package/prettier.md) 2.2.1
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.2.4

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-01-06
- 0.5.1 — 2020-10-22
- 0.5.0 — 2020-05-19
- 0.4.3 — 2020-01-11
- 0.4.2 — 2019-11-26
- 0.4.1 — 2019-08-15
- 0.4.0 — 2019-08-15
- 0.3.3 — 2018-11-13
- 0.3.2 — 2018-10-16
- 0.3.1 — 2018-10-05
- 0.3.0 — 2018-09-26
- 0.2.2 — 2018-09-21
- 0.2.1 — 2018-07-28
- 0.2.0 — 2018-07-28
- 0.1.0 — 2018-07-13

## 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 `<route>` custom block, its json content will be merged into the generated route record.

For example, if `index.vue` has the following `<route>` block:

```vue
<route>
{
  "name": "home",
  "meta": {
    "requiresAuth": true
  }
}
</route>

<template>
  <h1>Hello</h1>
</template>
```

The generated route config is like following:

```js
module.exports = [
  {
    name: 'home', // Overwritten by <route> block's name field.
    path: '/',
    component: () => import('@/pages/index.vue'),

    // Added by <route> 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

---
_Source: https://npm.io/package/vue-route-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._