add-route-middleware.md

title	description
addRouteMiddleware	addRouteMiddleware() is a helper function to dynamically add middleware in your application.

addRouteMiddleware

addRouteMiddleware() is a helper function to dynamically add route middleware in your Nuxt application.

::alert{type=info} Route middleware are navigation guards stored in the middleware/ directory of your Nuxt application (unless set otherwise). ::

Usage

addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {})

addRouteMiddleware() takes three arguments:

• name type: string | RouteMiddleware

name can be either a string or a function of type RouteMiddleware. Function takes the next route to as the first argument and the current route from as the second argument, both of which are Vue route objects.

Learn more about available properties of route objects.

• middleware type: RouteMiddleware

The second argument is a function of type RouteMiddleware. Same as above, it provides to and from route objects. It becomes optional if the first argument in addRouteMiddleware() is already passed as a function.

• options type: AddRouteMiddlewareOptions

An optional options argument lets you set the value of global to true to indicate whether the router middleware is global or not (set to false by default).

Examples

Anonymous Route Middleware

Anonymous route middleware does not have a name. It takes a function as the first argument, making the second middleware argument redundant:

export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    if (to.path === '/forbidden') {
      return false
    }
  })
})

Named Route Middleware

Named route middleware takes a string as the first argument and a function as the second.

When defined in a plugin, it overrides any existing middleware of the same name located in the middleware/ directory:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('named middleware added in Nuxt plugin')
  })
})

Global Route Middleware

Set an optional, third argument { global: true } to indicate whether the route middleware is global:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-middleware', (to, from) => {
      console.log('global middleware that runs on every route change')
    },
    { global: true }
  )
})