Global Navigation Guards in Nuxt using Middlewares

Recently, I developed route middlewares to provide functionality like local handling and internationalization in a Nuxt App. Seeing that I am relatively new to Nuxt and SSR development in general. I was dazzled by how easy it is and thought I could share that with newbies to Nuxt as well.

Navigation Guards?

If you have used Vue before you are probably aware of vue-router navigation guards which provides you the capabilities to redirect or cancel route navigations.

Navigation guards can be defined on application, page or component level giving you a handful layers of control. They can provide you with a very simplistic approach to share functionality, logic and make routing decisions within your application.

Navigation Guards in Nuxt

When developing a Nuxt app using SSR, you are quickly going to realise that it don’t work as expected. As you would want the navigation guard to run both on client and server, in order to have a matching server rendered html and hydrated html.

Fortunately, the Nuxt team took care of this and created route middleware.

Route middleware and Server middleware

Since some people might get confused with the term middleware if they come from a backend development background. Although similar conceptually it’s important to highlight the difference.

Middleware listed in the serverMiddleware property runs server-side before vue-server-renderer and can be used for server specific tasks like handling API requests or serving assets

Don’t confuse it with routes middleware which are called before each route by Vue in Client Side or SSR.

Route middleware

The official docs have a very nice guide which I highly recommend reading for more in depth explanation.

But basically, you write a function that runs before rendering either a page or group of pages.

When writing a middleware you get access to the context object which provides you with app store route params query redirect and much more and therefore allows you to solve many uses cases, especially when combined with plugins 🔥

Authentication middleware

Authentication is by far the most popular use case for a middleware. As it’s very common to have some protected views that users can access only when authenticated.

Since you have access to the store you can check if the user is authenticated or not and then redirect to the appropriate route.

Locale middleware

When dealing with language based content, you might need to fallback to default language instead of throwing a 404.

In this use case you can leverage the route to serve the user with relative content.

Internationalisation middleware

Handling internalisation is a perfect example of how easy middlewares can play with plugins to provide solutions to common problems.

Here is an example where you can explore more.

TLDR;

1. Nuxt provides middlewares which you can think of as Navigation guards in Vue
2. Writing custom middlewares is as easy as writing a simple function
3. Middlewares can interact with plugins and create magic
4. Don’t confuse middlewares with serverMiddlewares

Thanks for reading, if you have enjoyed this you might also like

Using Stenciljs with Vue.