Using Middleware in Nuxt.js

1. Introduction

In this tutorial, we will learn how to use middleware in Nuxt.js. Middleware allows you to define custom functions that run before rendering either a page or a group of pages. This mechanism is beneficial for handling authentication or setting up some data before the page loads.

By the end of this guide, you will be able to use middleware in your Nuxt.js applications effectively.

Prerequisites: Knowledge of JavaScript and a basic understanding of Vue.js and Nuxt.js are beneficial.

2. Step-by-Step Guide

• Middleware: Middleware in Nuxt.js are functions that are executed before rendering a page or group of pages. They are defined in the middleware directory and can be asynchronous.

• Creating Middleware: To create a middleware, you need to add a .js file in the middleware directory in your Nuxt.js project.

• Using Middleware: Middleware can be applied globally by adding it to the nuxt.config.js file, or specifically to a page by adding it to the middleware property in the page component.

3. Code Examples

Example 1: Creating a Middleware

Here, we create a middleware named auth.js in the middleware directory.

// middleware/auth.js
export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

In this code, we're checking if a user is authenticated. If not, we redirect them to the login page.

Example 2: Applying Middleware to a Page

Here, we apply the auth middleware to a specific page (e.g., dashboard).

// pages/dashboard.vue
export default {
  middleware: 'auth'
}

In this case, the auth middleware is applied to the dashboard page. If a user is not authenticated, they will be redirected to the login page.

Example 3: Applying Middleware Globally

You can apply middleware to every route by adding it to the router.middleware in the nuxt.config.js file.

// nuxt.config.js
export default {
  router: {
    middleware: 'auth'
  }
}

In this example, the auth middleware is applied globally. This means the user authentication check will happen on every page.

4. Summary

In this tutorial, we learned about middleware in Nuxt.js, how to create middleware, and how to apply it to a page or globally. For more advanced use-cases, you can check out the Nuxt.js documentation.

5. Practice Exercises

Exercise 1: Create a middleware that checks if a user has the role of 'admin'. If not, redirect them to a 'not-authorized' page.

Exercise 2: Apply the admin middleware you created to a page called 'admin-dashboard'.

Solutions:

// middleware/admin.js
export default function ({ store, redirect }) {
  // If the user is not an admin
  if (store.state.role !== 'admin') {
    return redirect('/not-authorized')
  }
}

// pages/admin-dashboard.vue
export default {
  middleware: 'admin'
}

In these exercises, you created an admin middleware that checks the role of the user and applied it to the admin-dashboard page.