@nuxtjs/router-extras

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

2. 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

<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

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 to views - 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> 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

PhpStorm/WebStorm

• Place cursor right after tag
• Right click on cursor and choose "Show context actions"
• Select Inject language or reference
• Select "JSON5" for JavaScript or "Yaml" for YAML

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