@bravadoco/nuxt-redirect

As original @nuxtjs/redirect-module seems abandoned, I created that repo with support of:

• client redirects with vue-router (thanks @ricardogobbosouza);
• permanent: true instead of 301/302 status code (like in next.js redirects) to avoid confusion and mistakes;
• path-to-regexp instead of 2 different scheme for client and server;
• redirect to external urls;

Todo:

• to as async function for vue-router;
• fill params for external url;

Redirect Module 🔀

Nuxt module to dynamically redirect initial requests

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

• Add the @bravadoco/nuxt-redirect dependency with yarn or npm to your project
• Add @bravadoco/nuxt-redirect to the modules section of nuxt.config.js:
• Configure it:

{
  modules: [
    ['@bravadoco/nuxt-redirect', {
      // Redirect option here
    }]
  ]
}

Using top level options

{
  modules: [
    '@bravadoco/nuxt-redirect'
  ],
  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:

redirect: [
  { from: '/myoldurl', to: '/mynewurl' },
  { from: '/anotherurl', to: 'https://google.com' }
]

You can set up a custom status code as well. By default, it's 302!

redirect: [
  { from: '/myoldurl', to: '/mynewurl', statusCode: 301 }
]

You could use permanent: true for 301 redirect. Result the same as above.

redirect: [
  { from: '/myoldurl', to: '/mynewurl', permanent: true }
]

We use path-to-regexp under the hood, so feel free to use (.*) and named params.

redirect: [
  { from: '/myoldurl/(.*)', to: '/comeallhere' }, // Many urls to one
  { from: '/anotherold/:slug', to: '/new/:slug' } // One to one mapping
  { from: '/onemoreold/:category/:slug', to: '/new/:slug' } // Get rid of param
]

Furthermore you can use a function to create your to url as well :+1: The requested url will be provided as arguments from middleware. Function will be executed while navigation in server middleware and in client's vue-router.

redirect: [
  {
    from: '/someUrlHere/(.*)',
    to: (url) => {
      const param = url.match(/someUrlHere\/(.*)$/)[1]
      return `/posts/${param}`
    }
  }
]

Gotchas

Due to inconsistency of server middleware and vue-router you can't use async functions for to. If you want to send a PR with that feature - feel free!

Development

• Clone this repository
• Install dependencies using yarn install or npm install
• Start development server using npm run dev

License

MIT License

Copyright (c) Alexander Lichter [e-mail]

Copyright (c) Artur Kornakov [e-mail]