@nuxtjs/router-extras

Extra add-ons for Nuxt 2 router

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

Nuxt 3

Looking for a Nuxt 3 alternative? Use the core composable definePageMeta.

Example:

<script setup>
definePageMeta({
  path: '/posts',
  alias: ['/articles', '/blog']
})
</script>

Features

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

Setup

Add @nuxtjs/router-extras dependency to your project

yarn add --dev @nuxtjs/router-extras # or npm install --save-dev @nuxtjs/router-extras

Add @nuxtjs/router-extras to the buildModules section of nuxt.config.js

:warning: 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

```xml { path: '/posts' } ```

Yaml

```xml path: /posts ```

Define multiple aliases for single page

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

JavaScript

```xml { path: '/posts', alias: [ '/articles', '/blog' ] } ```

Yaml

```xml path: /posts alias: - /articles - /blog ```

Aliases can have their own props

JavaScript

```xml { path: '/posts', alias: [ '/articles', { path: '/blog', props: { section: 'top-posts' } } ] } ```

Yaml

```xml path: /posts alias: - /articles - path: /blog props: section: top-posts ```

Define multiple params regardless of pages directory structure

JavaScript

```xml { path: '/post/:id/:title?' } ```

Yaml

```xml path: /post/:id/:title? ```

Define named views for the page

JavaScript

```xml { namedViews: { currentView: 'main', views: { side: '~/components/side.vue' }, chunkNames: { side: 'components/side' } } } ```

Yaml

```xml namedViews: currentView: "main" views: side: "~/components/side.vue" chunkNames: side: "~/components/side.vue" ```

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
`namedViews`	JS & YAML	Add named view to the path, see Named Views Support

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

nuxt-community / router-extras-module

readme

@nuxtjs/router-extras

Nuxt 3

Features

Setup

Using top level options

Options

`routerNativeAlias`

Usage

Define custom paths for a page

Define multiple aliases for single page

Define multiple params regardless of pages directory structure

Define named views for the page

Valid Extras

Named views support

Syntax Highlighting

Visual Studio Code

PhpStorm/WebStorm

Development

License