Skip to content
Extra Add-ons For Nuxt Router
JavaScript Vue
Branch: master
Clone or download
farnabaz chore(deps): update dependency chokidar to ^3.3.0 (#80)
chore(deps): update dependency chokidar to ^3.3.0
Latest commit df5398d Nov 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci refactor: update module Sep 2, 2019
example refactor: update module Sep 2, 2019
lib
test refactor: update module Sep 2, 2019
.editorconfig Initial Commit Aug 26, 2018
.eslintignore refactor: update module Sep 2, 2019
.eslintrc.js refactor: update module Sep 2, 2019
.gitignore refactor: update module Sep 2, 2019
CHANGELOG.md Update CHANGELOG.md Aug 31, 2019
LICENSE refactor: update module Sep 2, 2019
README.md docs: typo Oct 4, 2019
commitlint.config.js
husky.config.js refactor: update module Sep 2, 2019
jest.config.js refactor: update module Sep 2, 2019
package.json chore(deps): update dependency chokidar to ^3.3.0 Nov 2, 2019
renovate.json Update renovate.json Feb 24, 2019
yarn.lock

README.md

@nuxtjs/router-extras

npm version npm downloads Circle CI Codecov License

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

Setup

  1. Add @nuxtjs/router-extras dependency to your project
yarn add --dev @nuxtjs/router-extras # or npm install --save-dev @nuxtjs/router-extras
  1. Add @nuxtjs/router-extras to the buildModules section of nuxt.config.js

⚠️ 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

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>

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

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

You can’t perform that action at this time.