@frontend-twentysixdigital/router-extras

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

JavaScript

<router>
  {
    path: '/posts'
  }
</router>

Yaml

<router>
  path: /posts
</router>

Define multiple aliases for single page

If you want more paths for a single page, define them with aliases

JavaScript

<router>
 {
    path: '/posts',
    alias: [
      '/articles',
      '/blog'
    ]
 }
</router>

Yaml

<router>
    path: /posts
    alias:
        - /articles
        - /blog
</router>

Aliases can have their own props

JavaScript

<router>
  {
    path: '/posts',
    alias: [
      '/articles',
      {
        path: '/blog',
        props: {
          section: 'top-posts'
        }
      }
    ]
  }
</router>

Yaml

<router>
  path: /posts
  alias:
      - /articles
      - 
        path: /blog
        props:
          section: top-posts
</router>

Define multiple params regardless of pages directory structure

JavaScript

<router>
  {
    path: '/post/:id/:title?'
  }
</router>

Yaml

<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