Nuxt module to dynamically redirect initial requests
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!
@nuxtjs/redirect-module dependency with yarn or npm to your project@nuxtjs/redirect-module to the modules section of nuxt.config.js:{
modules: [
['@nuxtjs/redirect-module', {
// Redirect option here
}]
]
}
{
modules: [
'@nuxtjs/redirect-module'
],
redirect: [
// Redirect options here
]
}
rules[]Rules of your redirects.
onDecode(req, res, next) => decodeURI(req.url)You can set decode.
onDecodeError(error, req, res, next) => next(error)You can set callback when there is an error in the decode.
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 :+1:
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)
}
undefinedATTENTION: 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.
yarn install or npm installnpm run devCopyright © Alexander Lichter npm@lichter.io