Vue Router route config generator for multipage
Last updated a year ago by rainsoft .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-macula-route-generator 
SYNC missed versions from official npm registry.


Vue Router route config generator for multi pages.

forked from ktsn/vue-route-generator

You may want to use vue-macula-auto-routing for auto generating routing or vue-cli-plugin-macula-auto-routing which includes all useful features on routing.


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:

├── index.vue
├── users.vue
└── users/
    └── _id.vue

Then run the following script:

const { generateRoutes } = require('vue-macula-auto-routing')

const code = generateRoutes({
  pages: './pages' // Vue page component directory


vue-macula-auto-routing will generate like the following code (beautified the indentations etc.):

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:

const fs = require('fs')
const { generateRoutes } = require('vue-macula-auto-routing')

const code = generateRoutes({
  pages: './pages'

fs.writeFileSync('./router/routes.js', code)
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

// import generated routes
import routes from './routes'


export default new Router({


The routing is inspired by Nuxt routing and is implemented with the same functionality.


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 Meta

If the components have <route-meta> custom block, its json content is passed to generated route meta.

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

  "requiresAuth": true


The generated route config is like following:

module.exports = [
    name: 'index',
    path: '/',
    component: () => import('@/pages/index.vue'),
    meta: {
      requiresAuth: true


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).
  • nested: If true, generated route path will be always treated as nested. (e.g. will generate path: 'foo' rather than path: '/foo')

Related Projects



Current Tags

  • 0.3.4                                ...           latest (a year ago)

2 Versions

  • 0.3.4                                ...           a year ago
  • 0.3.3                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 3
Last Month 7
Dependencies (2)
Dev Dependencies (11)
Dependents (1)

Copyright 2014 - 2017 © |