{"id":15164590,"url":"https://github.com/nuxt-community/router-extras-module","last_synced_at":"2025-09-30T20:31:21.596Z","repository":{"id":32920562,"uuid":"146201133","full_name":"nuxt-community/router-extras-module","owner":"nuxt-community","description":"Extra Add-ons For Nuxt 2 Router","archived":true,"fork":false,"pushed_at":"2024-02-23T21:34:19.000Z","size":1361,"stargazers_count":279,"open_issues_count":13,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-12T07:06:39.217Z","etag":null,"topics":["nuxt-module","nuxtjs","vue-router"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/nuxt-community/router-extras-module","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/nuxt-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-08-26T17:21:01.000Z","updated_at":"2024-05-28T19:27:42.000Z","dependencies_parsed_at":"2023-01-14T22:45:28.942Z","dependency_job_id":"3e056fd2-53c1-49a4-a6b9-caa475082661","html_url":"https://github.com/nuxt-community/router-extras-module","commit_stats":{"total_commits":166,"total_committers":15,"mean_commits":"11.066666666666666","dds":0.6445783132530121,"last_synced_commit":"4d935df31d645909bce26e5b3fb2186c83a3a12f"},"previous_names":["alibaba-aero/nuxt-router-extras"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frouter-extras-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frouter-extras-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frouter-extras-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-community%2Frouter-extras-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-community","download_url":"https://codeload.github.com/nuxt-community/router-extras-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234774928,"owners_count":18884522,"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":["nuxt-module","nuxtjs","vue-router"],"created_at":"2024-09-27T03:40:49.809Z","updated_at":"2025-09-30T20:31:16.238Z","avatar_url":"https://github.com/nuxt-community.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# @nuxtjs/router-extras\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Circle CI][circle-ci-src]][circle-ci-href]\n[![Codecov][codecov-src]][codecov-href]\n[![License][license-src]][license-href]\n\nExtra add-ons for Nuxt 2 router\n\n**Demo**: \u003chttps://codesandbox.io/s/github/nuxt-community/router-extras-module\u003e\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Nuxt 3\n\nLooking for a Nuxt 3 alternative? Use the core composable [definePageMeta](https://nuxt.com/docs/api/utils/define-page-meta#definepagemeta).\n\nExample:\n\n```vue\n\u003cscript setup\u003e\ndefinePageMeta({\n  path: '/posts',\n  alias: ['/articles', '/blog']\n})\n\u003c/script\u003e\n```\n\n## Features\n\n- Define custom paths for a page\n- Define multiple aliases for a single page\n- Define multiple params regardless of pages directory structure\n\n## Setup\n\n1. Add `@nuxtjs/router-extras` dependency to your project\n\n```bash\nyarn add --dev @nuxtjs/router-extras # or npm install --save-dev @nuxtjs/router-extras\n```\n\n2. Add `@nuxtjs/router-extras` to the `buildModules` section of `nuxt.config.js`\n\n:warning: If you are using Nuxt `\u003c 2.9.0`, use `modules` instead.\n\n```js\n{\n  buildModules: [\n    // Simple usage\n    '@nuxtjs/router-extras',\n\n    // With options\n    ['@nuxtjs/router-extras', { /* module options */ }]\n  ]\n}\n```\n\n### Using top level options\n\n```js\n{\n  buildModules: [\n    '@nuxtjs/router-extras'\n  ],\n  routerExtras: {\n    /* module options */\n  }\n}\n```\n\n## Options\n\n### `routerNativeAlias`\n\n- Default: `true`\n\nSimple aliases will be added as router alias, see [vue-router](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias)\n\n## Usage\n\n### Define custom paths for a page\n\nSimply add a block inside Vue file and define a path in JavaScript or [Yaml](https://en.wikipedia.org/wiki/YAML)\n\n\u003cdetails open\u003e\n  \u003csummary\u003eJavaScript\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n  {\n    path: '/posts'\n  }\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eYaml\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n  path: /posts\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n### Define multiple aliases for single page\n\nIf you want more paths for a single page, define them with aliases\n\n\u003cdetails open\u003e\n  \u003csummary\u003eJavaScript\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n {\n    path: '/posts',\n    alias: [\n      '/articles',\n      '/blog'\n    ]\n }\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eYaml\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n    path: /posts\n    alias:\n        - /articles\n        - /blog\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\nAliases can have their own props\n\n\u003cdetails open\u003e\n  \u003csummary\u003eJavaScript\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n  {\n    path: '/posts',\n    alias: [\n      '/articles',\n      {\n        path: '/blog',\n        props: {\n          section: 'top-posts'\n        }\n      }\n    ]\n  }\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eYaml\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n  path: /posts\n  alias:\n      - /articles\n      - \n        path: /blog\n        props:\n          section: top-posts\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n### Define multiple params regardless of pages directory structure\n\n\u003cdetails open\u003e\n  \u003csummary\u003eJavaScript\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n  {\n    path: '/post/:id/:title?'\n  }\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eYaml\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n  path: /post/:id/:title?\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n\n### Define named views for the page\n\n\u003cdetails open\u003e\n  \u003csummary\u003eJavaScript\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n{\n  namedViews: {\n    currentView: 'main',\n    views: {\n      side: '~/components/side.vue'\n    },\n    chunkNames: {\n      side: 'components/side'\n    }\n  }\n}\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eYaml\u003c/summary\u003e\n\n```xml\n\u003crouter\u003e\n  namedViews:\n    currentView: \"main\"\n    views:\n      side: \"~/components/side.vue\"\n    chunkNames:\n      side: \"~/components/side.vue\"\n\u003c/router\u003e\n```\n\n\u003c/details\u003e\n\n## Valid Extras\n|     Extras       |  Support  | Description |\n|     -----        |  -------  | ----------- |\n| `path`           | JS \u0026 YAML | Change page URL |\n| `alias`          | JS \u0026 YAML | Add single or multiple aliases to page, Module supports two types of aliases \u003cbr\u003e - **Simple Alias**: These aliases are defined as simple strings. If `routerNativeAlias` is true, simple aliases will be added as router alias, see vue-router [docs](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias) \u003cbr/\u003e - **Clone Alias**: These aliases are in form of object and they can have their own extras. These aliases will be added as an individual route. They can have their own props and they can have different number of url params |\n| `meta`           | JS \u0026 YAML | Add Meta information to the page, meta can be used by middlewares |\n| `name`           | JS \u0026 YAML | Define custom name for route |\n| `props`          | JS \u0026 YAML | Pass predefined props to page |\n| `beforeEnter`    |    JS     | Define `beforeEnter` guard for this route, see: [Global Before Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) |\n| `caseSensitive`  | JS \u0026 YAML | Use case sensitive route match (default: false) |\n| `redirect`       | JS \u0026 YAML | Redirect current page to new location|\n| `namedViews`     | JS \u0026 YAML | Add named view to the path, see [Named Views Support](#named-views-support) |\n\n## Named views support\n\nThere is support for [named views in nuxt](https://nuxtjs.org/guide/routing#named-views), but it requires the user to write a lot of boilerplate code in the config. The `namedViews` property in the `\u003crouter\u003e` block allows for a more streamlined configuration \n\nNamed views key is a bit different from all other settings. It expects an object with following properties:\n- `currentView`: actual view name for the current component. Defaults to `\"default\"`, to be rendered in plain `\u003cnuxt-child /\u003e`\n- `views`: object, where keys are view names and values are component paths. It supports all expected path resolution (`~/` and others)\n- `chunkNames`: object, where keys are view names and values are webpack chunks for them. Object structure is expected to be equal to `views` - all the same keys must be present.\n\nFor usage example see `example/pages/namedParent.vue` and `example/pages/namedParent/namedChild.vue`. \n\n## Syntax Highlighting\n\n### Visual Studio Code\n\nInstall [Vetur](https://vuejs.github.io/vetur/) extension and define [custom block](https://vuejs.github.io/vetur/highlighting.html#custom-block)\n\n- Add `\u003crouter\u003e` to `vetur.grammar.customBlocks` in VSCode settings\n\n```json\n\"vetur.grammar.customBlocks\": {\n    \"docs\": \"md\",\n    \"i18n\": \"json\",\n    \"router\": \"js\"\n}\n```\n\n- Execute command `\u003e Vetur: Generate grammar from vetur.grammar.customBlocks` in VSCode\n- Restart VSCode and enjoy awesome\n\n### PhpStorm/WebStorm\n- Place cursor right after \u003crouter\u003e tag\n- Right click on cursor and choose \"Show context actions\"\n- Select Inject language or reference\n- Select \"JSON5\" for JavaScript or \"Yaml\" for YAML\n\n## Development\n\n- Clone this repository\n- Install dependencies using `yarn install` or `npm install`\n- Start development server using `npm run dev`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) Nuxt Community\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/router-extras/latest.svg?style=flat-square\n[npm-version-href]: https://npmjs.com/package/@nuxtjs/router-extras\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/router-extras.svg?style=flat-square\n[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/router-extras\n\n[circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/router-extras-module.svg?style=flat-square\n[circle-ci-href]: https://circleci.com/gh/nuxt-community/router-extras-module\n\n[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/router-extras-module.svg?style=flat-square\n[codecov-href]: https://codecov.io/gh/nuxt-community/router-extras-module\n\n[license-src]: https://img.shields.io/npm/l/@nuxtjs/router-extras.svg?style=flat-square\n[license-href]: https://npmjs.com/package/@nuxtjs/router-extras\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Frouter-extras-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-community%2Frouter-extras-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-community%2Frouter-extras-module/lists"}