Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-community/router-module
Nuxt 2 module to use router.js instead of pages/ directory.
https://github.com/nuxt-community/router-module
nuxt nuxt-module router vue-router
Last synced: 3 days ago
JSON representation
Nuxt 2 module to use router.js instead of pages/ directory.
- Host: GitHub
- URL: https://github.com/nuxt-community/router-module
- Owner: nuxt-community
- License: mit
- Created: 2017-09-07T12:01:00.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-01-31T18:21:18.000Z (9 months ago)
- Last Synced: 2024-05-19T16:46:53.120Z (6 months ago)
- Topics: nuxt, nuxt-module, router, vue-router
- Language: TypeScript
- Homepage:
- Size: 1.78 MB
- Stars: 401
- Watchers: 8
- Forks: 28
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @nuxtjs/router
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]
Nuxt 2 module to use router.js instead of pages/ directory
[📖 **Release Notes**](./CHANGELOG.md)
## Nuxt 3
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:
```ts
export default defineNuxtConfig({
pages: true
})
```
## Features
Use your own `router.js` to handle your routes into your [Nuxt.js](https://nuxtjs.org) application.
## Setup
1. Add `@nuxtjs/router` dependency to your project
```bash
yarn add --dev @nuxtjs/router # or npm install --save-dev @nuxtjs/router
```
2. Add `@nuxtjs/router` to the `buildModules` section of `nuxt.config.js`
```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
```js
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`:
```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:
```bash
components/
my-page.vue
router.js
```
`router.js` need to export a `createRouter` method like this:
```js
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](https://nuxtjs.org/guide/views/#pages).
### 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.
```js
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
1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Start development server using `npm run dev`
## License
[MIT License](./LICENSE)
Copyright (c) Nuxt Community
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/router/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/router
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/router.svg
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/router
[github-actions-ci-src]: https://github.com/nuxt-community/router-module/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-community/router-module/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/router-module.svg
[codecov-href]: https://codecov.io/gh/nuxt-community/router-module
[license-src]: https://img.shields.io/npm/l/@nuxtjs/router.svg
[license-href]: https://npmjs.com/package/@nuxtjs/router