Skip to content

explore-vue/nuxt-router-extras

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

nuxt-router-extras

npm (scoped with tag) npm CircleCI Codecov Dependencies js-standard-style

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

About

Extra Add-ons For Nuxt Router

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 93.7%
  • Vue 6.3%