@nuxtjs/router-extras
v1.1.1
Published
Extra Add-ons for nuxt router
Downloads
16,442
Readme
@nuxtjs/router-extras
Extra add-ons for Nuxt router
Demo: https://codesandbox.io/s/github/nuxt-community/router-extras-module
Features
- Define custom paths for a page
- Define multiple aliases for a single page
- Define multiple params regardless of pages directory structure
Setup
- Add
@nuxtjs/router-extras
dependency to your project
yarn add --dev @nuxtjs/router-extras # or npm install --save-dev @nuxtjs/router-extras
- Add
@nuxtjs/router-extras
to thebuildModules
section ofnuxt.config.js
:warning: If you are using Nuxt < 2.9.0
, use modules
instead.
{
buildModules: [
// Simple usage
'@nuxtjs/router-extras',
// With options
['@nuxtjs/router-extras', { /* module options */ }]
]
}
Using top level options
{
buildModules: [
'@nuxtjs/router-extras'
],
routerExtras: {
/* module options */
}
}
Options
routerNativeAlias
- Default:
true
Simple aliases will be added as router alias, see vue-router
Usage
Define custom paths for a page
Simply add a block inside Vue file and define a path in JavaScript or Yaml
<router>
{
path: '/posts'
}
</router>
<router>
path: /posts
</router>
Define multiple aliases for single page
If you want more paths for a single page, define them with aliases
<router>
{
path: '/posts',
alias: [
'/articles',
'/blog'
]
}
</router>
<router>
path: /posts
alias:
- /articles
- /blog
</router>
Aliases can have their own props
<router>
{
path: '/posts',
alias: [
'/articles',
{
path: '/blog',
props: {
section: 'top-posts'
}
}
]
}
</router>
<router>
path: /posts
alias:
- /articles
-
path: /blog
props:
section: top-posts
</router>
Define multiple params regardless of pages directory structure
<router>
{
path: '/post/:id/:title?'
}
</router>
<router>
path: /post/:id/:title?
</router>
Define named views for the page
<router>
{
namedViews: {
currentView: 'main',
views: {
side: '~/components/side.vue'
},
chunkNames: {
side: 'components/side'
}
}
}
</router>
<router>
namedViews:
currentView: "main"
views:
side: "~/components/side.vue"
chunkNames:
side: "~/components/side.vue"
</router>
Valid Extras
| Extras | Support | Description |
| ----- | ------- | ----------- |
| path
| JS & YAML | Change page URL |
| alias
| JS & YAML | Add single or multiple aliases to page, Module supports two types of aliases - 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 - 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 |
| meta
| JS & YAML | Add Meta information to the page, meta can be used by middlewares |
| name
| JS & YAML | Define custom name for route |
| props
| JS & YAML | Pass predefined props to page |
| beforeEnter
| JS | Define beforeEnter
guard for this route, see: Global Before Guards |
| caseSensitive
| JS & YAML | Use case sensitive route match (default: false) |
| redirect
| JS & YAML | Redirect current page to new location|
| namedViews
| JS & YAML | Add named view to the path, see Named Views Support |
Named views support
There is support for named views in nuxt, but it requires the user to write a lot of boilerplate code in the config. The namedViews
property in the <router>
block allows for a more streamlined configuration
Named views key is a bit different from all other settings. It expects an object with following properties:
currentView
: actual view name for the current component. Defaults to"default"
, to be rendered in plain<nuxt-child />
views
: object, where keys are view names and values are component paths. It supports all expected path resolution (~/
and others)chunkNames
: object, where keys are view names and values are webpack chunks for them. Object structure is expected to be equal toviews
- all the same keys must be present.
For usage example see example/pages/namedParent.vue
and example/pages/namedParent/namedChild.vue
.
Syntax Highlighting
Visual Studio Code
Install Vetur extension and define custom block
- Add
<router>
tovetur.grammar.customBlocks
in VSCode settings
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json",
"router": "js"
}
- Execute command
> Vetur: Generate grammar from vetur.grammar.customBlocks
in VSCode - Restart VSCode and enjoy awesome
PhpStorm/WebStorm
- Use Yaml syntax
- Place cursor right after tag
- Right click on cursor and choose "Show context actions"
- Select Inject language or reference
- Select Yaml
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Nuxt Community