`defineNuxtRouteMiddleware()`

Defines a typed route middleware (navigation guard) for the middleware/ dir.

Since Nuxt 3.0 Spec ↗

Syntax

export default defineNuxtRouteMiddleware((to, from) => { ... })

Parameters

Name	Type	Required	Description
`middleware`	`(to, from) => void \| RouteLocationRaw \| false \| Promise<...>`	Yes	Guard executed before navigation. Return `navigateTo()` to redirect or `abortNavigation()`/`false` to cancel.

Returns

NavigationGuard — A typed middleware function for auto-registration.

Examples

// middleware/auth.global.ts
export default defineNuxtRouteMiddleware(async (to) => {
  const { loggedIn } = useAuth()
  if (to.path.startsWith('/app') && !loggedIn.value) {
    return navigateTo('/login')
  }
})

// Inline middleware referenced from a page
const checkPlan = defineNuxtRouteMiddleware(() => {
  if (!hasProPlan()) return navigateTo('/upgrade')
})

definePageMeta({ middleware: checkPlan })

Notes

Provides full TypeScript types for `to`/`from`. Global middleware uses the `.global` filename suffix; named middleware is opted into via `definePageMeta`. Runs server-side on first request and client-side on subsequent navigations — guard browser-only APIs accordingly.