Nuxt 2 module to use router.js instead of pages/ directory
This is now possible to extend vue-router with Nuxt 3 with different methods, learn more on https://nuxt.com/docs/guide/going-further/custom-routing
If you don't have the pages/ directory, make sure to enable Vue Router with:
export default defineNuxtConfig({
pages: true
})Use your own router.js to handle your routes into your Nuxt.js application.
- Add
@nuxtjs/routerdependency to your project
yarn add --dev @nuxtjs/router # or npm install --save-dev @nuxtjs/router- Add
@nuxtjs/routerto thebuildModulessection ofnuxt.config.js
export default {
buildModules: [
// Simple usage
'@nuxtjs/router',
// With options
['@nuxtjs/router', { /* module options */ }]
]
}dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.
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: [
'/'
]
}
}- Type:
String - Default:
srcDir
Location of you route file.
- Type:
String - Default:
router.js
Name of you route file.
- Type:
Boolean - Default:
false
Can access the default router.
- Type:
Boolean - Default:
'keepDefaultRouter'
Can disable/enable the pages/ directory into Nuxt.
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.jsrouter.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.
If you use the module with { keepDefaultRouter: true }, you can access the default router:
< 2.9.0, the parameter routerOptions is not available.
< 2.15.0, the parameter config is not available.
< 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(...)
}- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
Copyright (c) Nuxt Community
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent