//redirect-modulebyrchl

redirect-module

No more cumbersome redirects!

0
0
0
JavaScript

Redirect Module 🔀 No more cumbersome redirects!

npm version
npm downloads
Circle CI
Codecov
Dependencies
Standard JS

Nuxt module to dynamically redirect initial requests

📖 Release Notesundefined

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:
{
  modules: [
    ['@nuxtjs/redirect-module', {
      // Redirect option here
    }]
  ]
}

Using top level options

{
  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.

Usage

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).

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

Copyright © Alexander Lichter npm@lichter.io

[beta]v0.13.0