Extra Add-ons For Nuxt Router

Extra Add-ons For Nuxt Router

router-extras-module Extra add-ons for Nuxt router

@nuxtjs/router-extras

Extra add-ons for Nuxt router

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>

Define named views for the page

JavaScript

<router>
{
  namedViews: {
    currentView: 'main',
    views: {
      side: '~/components/side.vue'
    },
    chunkNames: {
      side: 'components/side'
    }
  }
}
</router>

Yaml

<router>
  namedViews:
    currentView: "main"
    views:
      side: "~/components/side.vue"
    chunkNames:
      side: "~/components/side.vue"
</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 | | 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

  • Use Yaml syntax
  • Place cursor right after tag
  • Right click on cursor and choose "Show context actions"
  • Select Inject language or reference
  • Select Yaml

Development

  • Clone this repository
  • Install dependencies using yarn install or npm install
  • Start development server using npm run dev

Download Details:

Author: nuxt-community

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

Source Code: https://github.com/nuxt-community/router-extras-module

vue vuejs nuxtjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7