Create named route middleware using defineNuxtRouteMiddleware helper function.

Route middleware are stored in the middleware/ directory of your Nuxt application (unless set otherwise).


defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddlewareinterface RouteMiddleware {  (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>}



  • Type: RouteMiddleware

A function that takes two Vue Router's route location objects as parameters: the next route to as the first, and the current route from as the second.

Learn more about available properties of RouteLocationNormalized in the Vue Router docs.


Showing Error Page

You can use route middleware to throw errors and show helpful error messages:

export default defineNuxtRouteMiddleware((to) => {  if ( === '1') {    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })  }})

The above route middleware will redirect a user to the custom error page defined in the ~/error.vue file, and expose the error message and code passed from the middleware.


Use useState in combination with navigateTo helper function inside the route middleware to redirect users to different routes based on their authentication status:

export default defineNuxtRouteMiddleware((to, from) => {  const auth = useState('auth')    if (!auth.value.isAuthenticated) {    return navigateTo('/login')  }  return navigateTo('/dashboard')})

Both navigateTo and abortNavigation are globally available helper functions that you can use inside defineNuxtRouteMiddleware.