router-module - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #ai #android #rust #deep-learning #java #awesome #cli #awesome-list #vue #security #openai #open-source

router-module

(★ 394)

Nuxt 2 module to use router.js instead of pages/ directory.

File Explorer

Download Latest Version (.zip)

- - ci.yml
- module.ts
- plugin.js
- custom-file-path.test.ts
- disable-parse-pages.test.ts
- fail.test.ts
- keep-default-router.test.ts
- ok.test.ts
.editorconfig
.eslintignore
.eslintrc
.gitignore
CHANGELOG.md
jest.config.js
LICENSE
package.json
README.md
renovate.json
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/nuxt-community/router-module

Downloads the entire project code from GitHub to your computer.

cd router-module

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add --dev @nuxtjs/router # or npm install --save-dev @nuxtjs/router

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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