Nuxt/docs/3.api/3.utils/add-route-middleware.md

86 lines
2.6 KiB
Markdown
Raw Normal View History

---
title: 'addRouteMiddleware'
description: 'addRouteMiddleware() is a helper function to dynamically add middleware in your application.'
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/router.ts
size: xs
---
::callout
Route middleware are navigation guards stored in the [`middleware/`](/docs/guide/directory-structure/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
::
## Type
```ts
addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {})
```
## 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/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).
## 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:
```ts [plugins/my-plugin.ts]
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:
```ts [plugins/my-plugin.ts]
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:
```ts [plugins/my-plugin.ts]
export default defineNuxtPlugin(() => {
addRouteMiddleware('global-middleware', (to, from) => {
console.log('global middleware that runs on every route change')
},
{ global: true }
)
})
```