Handling Redirects in Nuxt.js through Middleware
I recently published an article about how to handle redirects in Laravel, since I also use Nuxt.js I thought it would be good to write up how to handle redirects simplistically through pure Nuxt (no server, no advanced configuration).
To do this we'll need to leverage the serverMiddleware, you can learn more about this from the official Nuxt.js docs, but in short, it allows for us to handle additional routes that aren't defined within the folder structure (for example an API). In our case, we will be using the serverMiddleware to read the redirects and take us to the appropriate route.
We are going to create a JSON file to hold all of our redirects and then let the middleware read the start destination and send us to the final destination.
Create a new JSON file in your project and place it in your desired location. For this example, place the file in the following destination
Our JSON should contain an array of elements with a
to, please see the below example and adjust this to your own needs.
Create the serverMiddleware
Next, we need to create a file which can handle the reading of the JSON and the logic to handle the redirect. Create a new file in
/serverMiddleware/redirects.js with the following code:
The above file checks that the URL exists and if so, redirects to the destination. If not, the Nuxt application will move on and return the requested page.
Add to Nuxt.config.js
Before anything will work, we need to add the newly created redirects middleware into the
nuxt.config.js . Edit the
nuxt.config.js file and add the following in:
... serverMiddleware: [ '~/serverMiddleware/redirects.js' ], ...
Recompile the code and check that everything is working.
If you need to take the redirects a bit further or if you don't mind using third party packages there is an awesome package available at https://github.com/nuxt-community/redirect-module that can handle this for you.