All Projects → nuxt-community → Router Extras Module

nuxt-community / Router Extras Module

Licence: mit
Extra Add-ons For Nuxt Router

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Router Extras Module

nodejs-vuejs-mysql-boilerplate
Node.js (REST API) + Vue.js/Nuxt.js (Frontend/Backend) + MySQL Boilerplate
Stars: ✭ 134 (-30.93%)
Mutual labels:  vue-router, nuxtjs
Vuesion
Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.
Stars: ✭ 2,510 (+1193.81%)
Mutual labels:  vue-router, nuxtjs
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-72.16%)
Mutual labels:  nuxtjs, vue-router
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (+14.95%)
Mutual labels:  nuxtjs, vue-router
jooger.me
👍 My personal website,powered by @nuxt
Stars: ✭ 39 (-79.9%)
Mutual labels:  vue-router, nuxtjs
Vuecnodejs
⚽️🎉Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO):
Stars: ✭ 705 (+263.4%)
Mutual labels:  nuxtjs, vue-router
Vue Soundcloud
🎧 A SoundCloud client built with Vue and Nuxt
Stars: ✭ 141 (-27.32%)
Mutual labels:  nuxtjs, vue-router
Sprites As A Service
Generate your personal 8-bit avatars using Cellular Automata, a mathematical model that simulates life, survival, and extinction
Stars: ✭ 177 (-8.76%)
Mutual labels:  nuxtjs
Svg Sprite Module
Optimize SVG files and combine them into sprite
Stars: ✭ 187 (-3.61%)
Mutual labels:  nuxtjs
Lamp Web
lamp-web 的前身是zuihou-ui + zuihou-admin-ui,从3.0.0版本开始,将2个系统合并为lamp-web,它是lamp项目的其中一员。lamp-web 是 lamp-cloud 和 lamp-boot 2个后台项目共用的管理后台,仅需在启动时调整vue.config.js文件中的代理。它基于vue element admin构建。
Stars: ✭ 177 (-8.76%)
Mutual labels:  vue-router
Mmf Blog Vue2 Ssr
mmf-blog-vue2 ssr(The service side rendering)
Stars: ✭ 174 (-10.31%)
Mutual labels:  vue-router
Press
Minimalist Markdown Publishing for Nuxt.js
Stars: ✭ 181 (-6.7%)
Mutual labels:  nuxtjs
Bael Template
Brutalist Blog theme for Netlify CMS
Stars: ✭ 187 (-3.61%)
Mutual labels:  nuxtjs
Nuxt Client Init Module
Provide client version of nuxtServerInit
Stars: ✭ 176 (-9.28%)
Mutual labels:  nuxtjs
Typed Vuex
🏦 A typed store accessor for vanilla Vuex.
Stars: ✭ 193 (-0.52%)
Mutual labels:  nuxtjs
Vue Cnode
一个vuex vue-router vue-resource的单页面应用demo,api来自cnodejs. vue 1
Stars: ✭ 174 (-10.31%)
Mutual labels:  vue-router
Vue Routisan
Elegant, fluent route definitions for Vue Router, inspired by Laravel. v3 is currently in beta. [email protected]
Stars: ✭ 193 (-0.52%)
Mutual labels:  vue-router
Vuesocial
something like QQ、weibo、weChat(vue+express+socket.io仿微博、微信的聊天社交平台)
Stars: ✭ 189 (-2.58%)
Mutual labels:  vue-router
Nuxt Netlify Cms Starter Template
⚡ Build server-less, static websites with Vue.js and Netlify CMS.
Stars: ✭ 186 (-4.12%)
Mutual labels:  nuxtjs
Vuewechatplateform
这是我用Vue 写的一个微信第三方公众号管理平台
Stars: ✭ 184 (-5.15%)
Mutual labels:  vue-router

@nuxtjs/router-extras

npm version npm downloads Circle CI Codecov License

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

  • 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].