Route Middleware

Run code before a route loads — guard pages, redirect, and apply checks per page or globally with route middleware.

Ad 728×90

Named middleware

Why: route middleware runs before a page loads, so it’s the place to guard access or redirect. Put it in app/middleware and define it with defineNuxtRouteMiddleware. Note: return navigateTo to redirect, or return nothing to allow.

// app/middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
  const user = useState('user')
  if (!user.value) {
    return navigateTo('/login')
  }
})

Apply it to a page

Why: a named middleware only runs where you opt in. A page selects it through definePageMeta — name it (without the .ts) and it runs before that page loads.

<!-- app/pages/dashboard.vue -->
<script setup lang="ts">
definePageMeta({ middleware: 'auth' })
</script>

<template>
  <h1>Dashboard</h1>
</template>

Stop navigation

Why: besides redirecting, middleware can block a route outright with abortNavigation — useful to throw a 403 when a check fails instead of sending the user elsewhere.

// app/middleware/admin.ts
export default defineNuxtRouteMiddleware(() => {
  const user = useState<{ role?: string }>('user')
  if (user.value?.role !== 'admin') {
    return abortNavigation('Admins only')
  }
})

Global middleware

Why: to run a check on EVERY route automatically, end the filename with .global.ts. No definePageMeta needed — Nuxt runs it before each navigation.

// app/middleware/analytics.global.ts
export default defineNuxtRouteMiddleware((to) => {
  // runs before every route change
  console.log('navigating to', to.path)
})

← Nuxt.js Course10 / 12