vue-route-generator
Vue Router route config generator.
You may want to use vue-markdown-routing to generate routes.
Overview
This tool generates a JavaScript code that exporting Vue Router's routes
config by reading your assets directories containing markdown files.
For example, when you have following file structure:
assets/
└── guides/
├── index.md
└── foo.md
Then run the following script:
const path = const generateRoutes = const code =
vue-route-generator will generate the following code:
name: 'guides' path: '/guides' children: name: 'guides-index' path: '' import'@/assets/guides/index.md' name: 'guides-foo' path: 'foo' import'@/assets/guides/foo.md'
You can save the code and include router instance:
const fs = const generateRoutes = const code = fs
// router/index.js // import generated routes Vue
Routing
Route metadata
The generator supports front-matter metadata in various format. It uses gray-matter under the hood to handle YAML, JSON, TOML and Coffee formats.
---requiresAuth: true--- # Hello
The generated route config is like the following:
name: 'guides' path: '/guides' children: name: 'guides-index' path: '' import'@/assets/guides/index.md' meta: requiresAuth: true
References
generateRoutes(config: GenerateConfig): string
GenerateConfig
has the following properties:
folders
: An array of paths containing markdown files you want to load.importPrefix
: A string that will be added to importing component path (default@/assets/
).dynamicImport
: Use dynamic import expression (import()
) to import component (defaulttrue
).chunkNamePrefix
: Prefix for each route chunk name (only available whendynamicImport: true
).nested
: Iftrue
, generated route path will be always treated as nested. (e.g. will generatepath: 'foo'
rather thanpath: '/foo'
)
Related Projects
- vue-markdown-routing: Generate Vue Router routing automatically.
License
MIT
Thanks
Thanks to ktsn for the initial code!