@nuxtjs/router
v1.7.0
Published
Nuxt.js module to use router.js instead of pages/ directory
Downloads
86,255
Keywords
Readme
@nuxtjs/router
Nuxt.js module to use router.js instead of pages/ directory
Features
Use your own router.js
to handle your routes into your Nuxt.js application.
Setup
- Add
@nuxtjs/router
dependency to your project
yarn add --dev @nuxtjs/router # or npm install --save-dev @nuxtjs/router
- Add
@nuxtjs/router
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
// Simple usage
'@nuxtjs/router',
// With options
['@nuxtjs/router', { /* module options */ }]
]
}
:warning: If you are using Nuxt < v2.9 you have to install the module as a dependency
(No --dev
or --save-dev
flags) and use modules
section in nuxt.config.js
instead of buildModules
.
Using top level options
export default {
buildModules: [
'@nuxtjs/router'
],
routerModule: {
/* module options */
}
}
If you are using SPA mode, add an index /
route to generate
section of nuxt.config.js
:
export default {
generate: {
routes: [
'/'
]
}
}
Options
path
- Type:
String
- Default:
srcDir
Location of you route file.
fileName
- Type:
String
- Default:
router.js
Name of you route file.
keepDefaultRouter
- Type:
Boolean
- Default:
false
Can access the default router.
parsePages
- Type:
Boolean
- Default:
'keepDefaultRouter'
Can disable/enable the pages/
directory into Nuxt.
Usage
This module, by default, disable the pages/
directory into Nuxt and will use a router.js
file at your srcDir
directory:
components/
my-page.vue
router.js
router.js
need to export a createRouter
method like this:
import Vue from 'vue'
import Router from 'vue-router'
import MyPage from '~/components/my-page'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
component: MyPage
}
]
})
}
The components defined as routes have access to the same special attributes and functions (head, asyncData, validate, etc.) as the Nuxt Page component.
Accessing default router
If you use the module with { keepDefaultRouter: true }
, you can access the default router:
:warning: If you are using Nuxt < 2.9.0
, the parameter routerOptions
is not available.
:warning: If you are using Nuxt < 2.15.0
, the parameter config
is not available.
:warning: If you are using Nuxt < 2.16.0
, the parameter store
is not available.
export function createRouter(ssrContext, createDefaultRouter, routerOptions, config, store) {
const options = routerOptions ? routerOptions : createDefaultRouter(ssrContext, config).options
return new Router({
...options,
routes: fixRoutes(options.routes, store)
})
}
function fixRoutes(defaultRoutes, store) {
// default routes that come from `pages/`
// Filter some routes using the content of the store for example
return defaultRoutes.filter(...).map(...)
}
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Nuxt Community