Router Extras Module

Extra add-ons for Nuxt router

Demo: https://codesandbox.io/s/github/nuxt-community/router-extras-module

📖 Release Notes

Features

• Define custom paths for a page
• Define multiple aliases for a single page
• Define multiple params regardless of pages directory structure

Installation

yarn add @nuxtjs/router-extras
# or
npm i @nuxtjs/router-extras

Usage

Add @nuxtjs/router-extras to modules section of nuxt.config.js:

{
  modules: [
    '@nuxtjs/router-extras'
  ]
}

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>

Options

Module default options:

{
  routerNativeAlias: true
}

You can update them with the routerExtras option in nuxt.config.js:

export default {
  modules: ['@nuxtjs/router-extras'],
  routerExtras: {
    routerNativeAlias: false
  }
}

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 & YAML | Define beforeEnter guard for this route, see: Global Before Guards | | caseSensitive | JS | Use case sensitive route match (default: false) | | redirect | JS & YAML | Redirect current page to new location|

Syntax Highlighting

Visual Studio Code

Install Vetur extension and define custom block

• Add <router> to vetur.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

Development

• Clone this repository
• Install dependencies using yarn install or npm install
• Start development server using npm run dev

License

MIT License Copyright (c) Nuxt Community