Nuxt 2 module to dynamically redirect initial requests
In Nuxt 3 redirects are supported out of the box through Route Rules, this module may not be needed.
export default defineNuxtConfig({
routeRules: {
// Redirects legacy urls
'/old-page': { redirect: '/new-page' }
}
})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!
- Add the
@nuxtjs/redirect-moduledependency withyarnornpmto your project - Add
@nuxtjs/redirect-moduleto themodulessection ofnuxt.config.js: - Configure it:
{
modules: [
['@nuxtjs/redirect-module', {
// Redirect option here
}]
]
}{
modules: [
'@nuxtjs/redirect-module'
],
redirect: [
// Redirect options here
]
}- Default:
[]
Rules of your redirects.
- Default:
(req, res, next) => decodeURI(req.url)
You can set decode.
- Default:
(error, req, res, next) => next(error)
You can set callback when there is an error in the decode.
- Default:
302
You can set the default statusCode which gets used when no statusCode is defined on the rule itself.
Simply add the links you want to redirect as objects to the module option array:
redirect: [
{ from: '^/myoldurl', to: '/mynewurl' }
]You can set up a custom status code as well. By default, it's 302!
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.
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 π
The from rule and the req of the middleware will be provided as arguments.
The function can also be async!
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:
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:
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).
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.
- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
Copyright (c) Alexander Lichter [email protected]
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent