Middleware

Middleware in Nuxt 3 allows you to execute custom logic before rendering a page or API route. Middleware functions run before a page or layout is loaded, making them useful for authentication, redirects, logging, or other pre-processing tasks.

Creating Middleware

To create a middleware, add a new file in the middleware directory of your Nuxt 3 project. For example, to create an authentication middleware:

// middleware/auth.js
import { useUserDetailsStore } from "@/store/userDetailsStore";
import { storeToRefs } from "pinia";

export default defineNuxtRouteMiddleware(() => {
  const { user } = storeToRefs(useUserDetailsStore());

    const localUser = JSON.parse(localStorage.getItem('user') || '{}');
  
    user.value = localUser;
 

    if (!( user.value )) return navigateTo('/login');
  });

to use the different types of Middleware

Global Middleware - Applied to all pages and layouts.

// nuxt.config.ts
export default defineNuxtConfig({
    router: {
        middleware: ['auth']
    }
});

Route Middleware - Applied to specific pages or layouts.

// layouts/default.vue or pages/index.vue
<script setup>
definePageMeta({
    middleware: 'auth'
});
</script>

Conclusion

Nuxt 3 middleware provides a powerful way to handle tasks before rendering pages. By understanding how to create and apply middleware, you can enhance the functionality and security of your Nuxt 3 applications.

For more information, refer to the Nuxt 3 documentation.