{"id":13653120,"url":"https://github.com/ktsn/vue-cli-plugin-auto-routing","last_synced_at":"2025-04-04T16:17:23.550Z","repository":{"id":32711102,"uuid":"140939867","full_name":"ktsn/vue-cli-plugin-auto-routing","owner":"ktsn","description":"Automatically resolve pages and layouts routing","archived":false,"fork":false,"pushed_at":"2023-02-28T17:56:52.000Z","size":108,"stargazers_count":296,"open_issues_count":7,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T15:11:18.241Z","etag":null,"topics":["auto-generate","routing","vue-cli-plugin","vue-router","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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}},"created_at":"2018-07-14T11:15:32.000Z","updated_at":"2025-03-23T07:40:18.000Z","dependencies_parsed_at":"2024-01-12T19:47:16.577Z","dependency_job_id":"6069192f-9711-4722-b0db-acacca2328d8","html_url":"https://github.com/ktsn/vue-cli-plugin-auto-routing","commit_stats":{"total_commits":78,"total_committers":7,"mean_commits":"11.142857142857142","dds":0.4358974358974359,"last_synced_commit":"25f8e2cc51a58082ba5e51b5b51320a73781a2c9"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-cli-plugin-auto-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-cli-plugin-auto-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-cli-plugin-auto-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-cli-plugin-auto-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktsn","download_url":"https://codeload.github.com/ktsn/vue-cli-plugin-auto-routing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208190,"owners_count":20901570,"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":["auto-generate","routing","vue-cli-plugin","vue-router","vuejs"],"created_at":"2024-08-02T02:01:06.104Z","updated_at":"2025-04-04T16:17:23.524Z","avatar_url":"https://github.com/ktsn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-cli-plugin-auto-routing\n\n[![vue-cli-plugin-auto-routing Dev Token](https://badge.devtoken.rocks/vue-cli-plugin-auto-routing)](https://devtoken.rocks/package/vue-cli-plugin-auto-routing)\n\nVue CLI plugin that provides auto routing feature.\n\n## Overview\n\nEnsure you are in a project generated by Vue CLI \u003e= v3. You install this plugin by running the following command:\n\n```bash\n# If you did not install router plugin yet\n$ vue add router\n\n# Install vue-cli-plugin-auto-routing\n$ vue add auto-routing\n```\n\nAfter adding the plugin, the file structure will be the below.\n\n```\nsrc/\n├── pages/\n├── layouts/\n└── router/\n```\n\n### Pages\n\n`.vue` files under the `pages/` directory will be automatically resolved to generate routing. Vue Router `routes` options will be configured with the file structure under the `pages/`. The generated routing is same with [Nuxt's routing](https://nuxtjs.org/guide/routing).\n\nNote that directories and files started and ended with `__` (two underscores, e.g. `__foo__.vue`) will be ignored.\n\nFor example, when you have the following page components:\n\n```\npages/\n├── __partial__.vue\n├── index.vue\n├── users.vue\n└── users/\n    └── _id.vue\n```\n\nIt is resolved to the below routes. Note that `_` prefixed components generate dynamic routing.\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\nIf you want to make route param required, create a directory for the param and add `index.vue` in the directory. In the above example, if you replace `users/_id.vue` with `users/_id/index.vue`, `:id` param will be required.\n\n#### `\u003croute\u003e` custom block\n\nIf a page component has `\u003croute\u003e` custom block, the content json will be merged with [route config](https://router.vuejs.org/api/#routes).\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 the following:\n\n```js\nmodule.exports = [\n  {\n    name: 'home',\n    path: '/',\n    component: () =\u003e import('@/pages/index.vue'),\n    meta: {\n      requiresAuth: true\n    }\n  }\n]\n```\n\n### Layouts\n\nComponents under the `layouts/` directory will be used as shared layout component in the application. You can choose a layout by specifying `layout` component option in a page component. The default value of `layout` is `'default'`. That means when you omit `layout` options, `layouts/default.vue` will be choosed as the layout component. This is the same concept with [Nuxt's layouts](https://nuxtjs.org/guide/views#layouts).\n\nFor example, when you have `layouts/foo.vue` and `pages/index.vue`:\n\n```vue\n\u003c!-- layouts/foo.vue --\u003e\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eFoo Layout\u003c/h1\u003e\n    \u003crouter-view /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```vue\n\u003c!-- pages/index.vue --\u003e\n\u003ctemplate\u003e\n  \u003cp\u003eindex.vue\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  // You can specify layout component name here (default value is 'default')\n  layout: 'foo'\n}\n\u003c/script\u003e\n```\n\nThe following html will be rendered:\n\n```html\n\u003cdiv\u003e\n  \u003ch1\u003eFoo Layout\u003c/h1\u003e\n  \u003cp\u003eindex.vue\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Modifying Chunk Name\n\nA chunk name from auto generated file can be conflicted with your code. You may see the below error log in that case:\n\n```\n ERROR  Failed to compile with 1 errors\n error  in ./node_modules/vue-auto-routing/index.js\nIt's not allowed to load an initial chunk on demand. The chunk name \"index\" is already used by an entrypoint.\n ERROR  Build failed with errors.\nerror Command failed with exit code 1.\n```\n\nTo avoid this error, you can set `chunkNamePrefix` option to change the auto generated chunk name.\n\n```js\n// vue.config.js\n\nmodule.exports = {\n  pluginOptions: {\n    autoRouting: {\n      // Specify a prefix which will be added to all auto generated chunk name.\n      chunkNamePrefix: 'page-'\n    }\n  }\n}\n```\n\n## Options\n\nYou can specify options for this plugin under `pluginOptions.autoRouting` in `vue.config.js`. The options are simply passed to `vue-auto-routing` options.\nYou can see the available options list [here](https://github.com/ktsn/vue-route-generator#generateroutesconfig-generateconfig-string).\n\n```js\n// vue.config.js\n\nmodule.exports = {\n  pluginOptions: {\n    autoRouting: {\n      // Optionally specify a custom output file, relative to the project root\n      outFile: \"src/router/routes.js\",\n      // Specify other vue-auto-routing options here\n      nested: false\n    }\n  }\n}\n```\n\n## Related Projects\n\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- [vue-route-generator](https://github.com/ktsn/vue-route-generator): Low-level utility generating routing (used by vue-auto-routing under the hood).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-cli-plugin-auto-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktsn%2Fvue-cli-plugin-auto-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-cli-plugin-auto-routing/lists"}