nuxt-router-extras

📖 Release Notes

Features

nuxt-router-extras can:

• define custom paths for page
• specify multiple paths to single page
• define multiple params regardless of pages directory structure

Setup

• Add nuxt-router-extras dependency using yarn or npm to your project
• Add nuxt-router-extras to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'nuxt-router-extras',

    // With options
    ['nuxt-router-extras', { /* module options */ }],
 ]
}

Usage

• define custom paths for page

  Simply add a block inside vue file and define path in Yaml

  <router>
      path: /posts
  </router>
  

• specify multiple paths to single page

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

  <router>
      path: /posts
      alias:
        - /articles
        - /blog
  </router>
  

• define multiple params regardless of pages directory structure

  <router>
      path: /post/:id/:title?
  </router>
  

Valid extras

• path: Change page url
• alias: Add single or multiple aliases to page
• meta: Add Meta information to page, metas can be used by middlewares
• props: Pass predefined props to page

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": "yaml"
  }
  

• 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)