addRouteMiddleware
En esta página
::note
Route middleware are navigation guards stored in the app/middleware/ directory of your Nuxt application (unless set otherwise).
::
Type#
```ts [Signature] function addRouteMiddleware (name: string, middleware: RouteMiddleware, options?: AddRouteMiddlewareOptions): void function addRouteMiddleware (middleware: RouteMiddleware): void
interface AddRouteMiddlewareOptions { global?: boolean }
## Parameters
### `name`
- **Type:** `string` | `RouteMiddleware`
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](/docs/4.x/api/composables/use-route).
### `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).
## Example
### Named Route Middleware
Named route middleware is defined by providing a string as the first argument and a function as the second:
```ts [app/plugins/my-plugin.ts]
export default defineNuxtPlugin(() => {
addRouteMiddleware('named-middleware', () => {
console.log('named middleware added in Nuxt plugin')
})
})
When defined in a plugin, it overrides any existing middleware of the same name located in the app/middleware/ directory.
Global Route Middleware#
Global route middleware can be defined in two ways:
- Pass a function directly as the first argument without a name. It will automatically be treated as global middleware and applied on every route change.
ts [app/plugins/my-plugin.ts]
export default defineNuxtPlugin(() => {
addRouteMiddleware((to, from) => {
console.log('anonymous global middleware that runs on every route change')
})
})
- Set an optional, third argument
{ global: true }to indicate whether the route middleware is global.
ts [app/plugins/my-plugin.ts]
export default defineNuxtPlugin(() => {
addRouteMiddleware('global-middleware', (to, from) => {
console.log('global middleware that runs on every route change')
},
{ global: true },
)
})