Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-community/redirect-module
No more cumbersome redirects for Nuxt 2!
https://github.com/nuxt-community/redirect-module
nuxt nuxt-module nuxt2 redirect seo
Last synced: about 2 months ago
JSON representation
No more cumbersome redirects for Nuxt 2!
- Host: GitHub
- URL: https://github.com/nuxt-community/redirect-module
- Owner: nuxt-community
- License: mit
- Created: 2018-04-17T21:23:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T21:35:32.000Z (about 2 months ago)
- Last Synced: 2024-07-26T22:11:35.915Z (about 2 months ago)
- Topics: nuxt, nuxt-module, nuxt2, redirect, seo
- Language: JavaScript
- Homepage:
- Size: 827 KB
- Stars: 309
- Watchers: 6
- Forks: 17
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Redirect Module 🔀 No more **cumbersome** redirects!
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Circle CI][circle-ci-src]][circle-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![Dependencies][david-dm-src]][david-dm-href]
[![Standard JS][standard-js-src]][standard-js-href]
> Nuxt 2 module to dynamically redirect initial requests
[📖 **Release Notes**](./CHANGELOG.md)
## Nuxt 3
In Nuxt 3 redirects are supported out of the box through [Route Rules](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering), this module may not be needed.
```ts
export default defineNuxtConfig({
routeRules: {
// Redirects legacy urls
'/old-page': { redirect: '/new-page' }
}
})
```
## Features
Redirecting URLs is an often discussed topic, especially when it comes to
SEO. Previously it was hard to create a "real" redirect without performance
loss or incorrect handling. But this time is over!
## Setup
1. Add the `@nuxtjs/redirect-module` dependency with `yarn` or `npm` to your project
2. Add `@nuxtjs/redirect-module` to the `modules` section of `nuxt.config.js`:
3. Configure it:
```js
{
modules: [
['@nuxtjs/redirect-module', {
// Redirect option here
}]
]
}
```
### Using top level options
```js
{
modules: [
'@nuxtjs/redirect-module'
],
redirect: [
// Redirect options here
]
}
```
## Options
### `rules`
- Default: `[]`
Rules of your redirects.
### `onDecode`
- Default: `(req, res, next) => decodeURI(req.url)`
You can set decode.
### `onDecodeError`
- Default: `(error, req, res, next) => next(error)`
You can set callback when there is an error in the decode.
### `statusCode`
- Default: `302`
You can set the default statusCode which gets used when no statusCode is defined on the rule itself.
## Usage
Simply add the links you want to redirect as objects to the module option array:
```js
redirect: [
{ from: '^/myoldurl', to: '/mynewurl' }
]
```
You can set up a custom status code as well. By default, it's *302*!
```js
redirect: [
{ from: '^/myoldurl', to: '/mynewurl', statusCode: 301 }
]
```
As you may have already noticed, we are leveraging the benefits of
*Regular Expressions*. Hence, you can fully customize your redirects.
```js
redirect: [
{ from: '^/myoldurl/(.*)$', to: '/comeallhere' }, // Many urls to one
{ from: '^/anotherold/(.*)$', to: '/new/$1' } // One to one mapping
]
```
Furthermore you can use a function to create your `to` url as well :+1:
The `from` rule and the `req` of the middleware will be provided as arguments.
The function can also be *async*!
```js
redirect: [
{
from: '^/someUrlHere/(.*)$',
to: (from, req) => {
const param = req.url.match(/functionAsync\/(.*)$/)[1]
return `/posts/${param}`
}
}
]
```
And if you really need more power... okay! You can also use a factory function
to generate your redirects:
```js
redirect: async () => {
const someThings = await axios.get("/myApi") // It'll wait!
return someThings.map(coolTransformFunction)
}
```
Now, if you want to customize your redirects, how your decode is done
or when there is some error in the decode, you can also:
```js
redirect: {
rules: [
{ from: '^/myoldurl', to: '/mynewurl' }
],
onDecode: (req, res, next) => decodeURI(req.url),
onDecodeError: (error, req, res, next) => next(error)
}
```
**ATTENTION**: The factory function **must** return an array with redirect
objects (as seen above).
## Gotchas
The redirect module will not work in combination with `nuxt generate`.
Redirects are realized through a server middleware, which can only react when there is a server running.
## 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) Alexander Lichter
[npm-version-src]: https://img.shields.io/npm/dt/@nuxtjs/redirect-module.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/@nuxtjs/redirect-module
[npm-downloads-src]: https://img.shields.io/npm/v/@nuxtjs/redirect-module/latest.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/redirect-module
[circle-ci-src]: https://img.shields.io/circleci/project/github/nuxt-community/redirect-module.svg?style=flat-square
[circle-ci-href]: https://circleci.com/gh/nuxt-community/redirect-module
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/redirect-module.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/nuxt-community/redirect-module
[david-dm-src]: https://david-dm.org/nuxt-community/redirect-module/status.svg?style=flat-square
[david-dm-href]: https://david-dm.org/nuxt-community/redirect-module
[standard-js-src]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square
[standard-js-href]: https://standardjs.com