@frontend-twentysixdigital/router-extras NPM

Router Extras Module

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

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

fs-extra gray-matter

@everything-registry/sub-chunk-343 @zalastax/nolb-_fro @infinitebrahmanuniverse/nolb-_fro

1.0.0

4 years ago