What is middleware in Nuxt and how to use it?

Runs before page/route rendering.

#Types

#1. Global Middleware

Runs on every route.

```javascript // middleware/auth.global.ts export default defineNuxtRouteMiddleware((to, from) => { const user = useUser();

if (!user.value && to.path !== '/login') { return navigateTo('/login'); } }); ```

#2. Named Middleware

Specific routes only.

```javascript // middleware/admin.ts export default defineNuxtRouteMiddleware((to, from) => { const user = useUser();

if (user.value?.role !== 'admin') { return abortNavigation('Not authorized'); } });

// pages/admin/index.vue definePageMeta({ middleware: 'admin' }); ```

#3. Inline Middleware

```javascript // pages/dashboard.vue definePageMeta({ middleware: (to, from) => { if (!hasAccess()) { return navigateTo('/'); } } }); ```

#Use Cases

Authentication: ```javascript export default defineNuxtRouteMiddleware((to) => { const token = useCookie('token');

if (!token.value) { return navigateTo('/login'); } }); ```

Logging: ```javascript export default defineNuxtRouteMiddleware((to, from) => { console.log(`Navigating from ${from.path} to ${to.path}`); }); ```