{"id":21701430,"url":"https://github.com/ktsn/vue-route-generator","last_synced_at":"2025-04-05T22:07:41.073Z","repository":{"id":32703805,"uuid":"140839020","full_name":"ktsn/vue-route-generator","owner":"ktsn","description":"Vue Router route config generator","archived":false,"fork":false,"pushed_at":"2023-03-18T03:53:31.000Z","size":1860,"stargazers_count":152,"open_issues_count":24,"forks_count":27,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T21:08:54.728Z","etag":null,"topics":["generator","routing","vue-router","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ktsn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-13T11:29:10.000Z","updated_at":"2025-03-23T07:40:29.000Z","dependencies_parsed_at":"2024-06-18T15:15:08.471Z","dependency_job_id":"c19f2b4e-8244-4daf-b18d-d95ed247978a","html_url":"https://github.com/ktsn/vue-route-generator","commit_stats":{"total_commits":279,"total_committers":7,"mean_commits":"39.857142857142854","dds":0.1899641577060932,"last_synced_commit":"1e3474382013a7b86b4d4bac68b6bd45e978afb8"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-route-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-route-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-route-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-route-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktsn","download_url":"https://codeload.github.com/ktsn/vue-route-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406090,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generator","routing","vue-router","vuejs"],"created_at":"2024-11-25T20:19:56.145Z","updated_at":"2025-04-05T22:07:41.043Z","avatar_url":"https://github.com/ktsn.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vue-route-generator\n\n[Vue Router](https://github.com/vuejs/vue-router) route config generator.\n\nYou 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.\n\n## Overview\n\nThis tool generates a JavaScript code that exporting Vue Router's `routes` config by reading your Vue components directory.\n\nFor example, when you have following file structure:\n\n```\npages/\n├── index.vue\n├── users.vue\n└── users/\n    └── _id.vue\n```\n\nThen run the following script:\n\n```js\nconst { generateRoutes } = require('vue-route-generator')\n\nconst code = generateRoutes({\n  pages: './pages' // Vue page component directory\n})\n\nconsole.log(code)\n```\n\nvue-route-generator will generate like the following code (beautified the indentations etc.):\n\n```js\nexport default [\n  {\n    name: 'index',\n    path: '/',\n    component: () =\u003e import('@/pages/index.vue')\n  },\n  {\n    name: 'users',\n    path: '/users',\n    component: () =\u003e import('@/pages/users.vue'),\n    children: [\n      {\n        name: 'users-id',\n        path: ':id',\n        component: () =\u003e import('@/pages/users/_id.vue')\n      }\n    ]\n  }\n]\n```\n\nYou can save the code and include router instance:\n\n```js\nconst fs = require('fs')\nconst { generateRoutes } = require('vue-route-generator')\n\nconst code = generateRoutes({\n  pages: './pages'\n})\n\nfs.writeFileSync('./router/routes.js', code)\n```\n\n```js\n// router/index.js\nimport Vue from 'vue'\nimport Router from 'vue-router'\n\n// import generated routes\nimport routes from './routes'\n\nVue.use(Router)\n\nexport default new Router({\n  routes\n})\n```\n\n## Routing\n\nThe routing is inspired by [Nuxt routing](https://nuxtjs.org/guide/routing) and is implemented with the same functionality.\n\n### Partials\n\nDirectories 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.\n\n## Route Custom Block\n\nIf the components have `\u003croute\u003e` custom block, its json content will be merged into the generated route record.\n\nFor example, if `index.vue` has the following `\u003croute\u003e` block:\n\n```vue\n\u003croute\u003e\n{\n  \"name\": \"home\",\n  \"meta\": {\n    \"requiresAuth\": true\n  }\n}\n\u003c/route\u003e\n\n\u003ctemplate\u003e\n  \u003ch1\u003eHello\u003c/h1\u003e\n\u003c/template\u003e\n```\n\nThe generated route config is like following:\n\n```js\nmodule.exports = [\n  {\n    name: 'home', // Overwritten by \u003croute\u003e block's name field.\n    path: '/',\n    component: () =\u003e import('@/pages/index.vue'),\n\n    // Added by \u003croute\u003e block's meta field.\n    meta: {\n      requiresAuth: true\n    }\n  }\n]\n```\n\n## Syntax Highlighting\n\nTo 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...\n```\n \"vetur.grammar.customBlocks\": {\n    \"route\": \"json\"\n  }\n```\n\n## References\n\n### `generateRoutes(config: GenerateConfig): string`\n\n`GenerateConfig` has the following properties:\n\n- `pages`: Path to the directory that contains your page components.\n- `importPrefix`: A string that will be added to importing component path (default `@/pages/`).\n- `dynamicImport`: Use dynamic import expression (`import()`) to import component (default `true`).\n- `chunkNamePrefix`: Prefix for each route chunk name (only available when `dynamicImport: true`).\n- `nested`: If `true`, generated route path will be always treated as nested. (e.g. will generate `path: 'foo'` rather than `path: '/foo'`)\n\n## Related Projects\n\n- [vue-cli-plugin-auto-routing](https://github.com/ktsn/vue-cli-plugin-auto-routing): Vue CLI plugin including auto pages and layouts resolution.\n- [vue-router-layout](https://github.com/ktsn/vue-router-layout): Lightweight layout resolver for Vue Router.\n- [vue-auto-routing](https://github.com/ktsn/vue-auto-routing): Generate Vue Router routing automatically.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-route-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktsn%2Fvue-route-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-route-generator/lists"}