mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-27 08:02:01 +00:00
90784f79d7
* docs: implement new website theme * chore: rename dirs * chore: update build * lint fix * chore: update deps * fix: include node_modules in esbuild step * chore: update deps * Update .gitignore * chore: update theme version * up * up * fix: use svg for illustration * chore: update to 0.0.12 * chore: force parse5 resolution * stay with build * feat: always display first home section * Update yarn.lock * chore: update theme * fix lint * docs: update home title * chore: update website theme version * Update docs/content/0.index.md Co-authored-by: pooya parsa <pyapar@gmail.com> * Update docs/content/0.index.md Co-authored-by: pooya parsa <pyapar@gmail.com> * up * chore: bump theme version * up * chore: up * up up and up * chore: generate * fix: boolean value * feat: new images * update again * chore: up * ouep * chore: up Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Clément Ollivier <clement.o2p@gmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com>
79 lines
2.6 KiB
Markdown
79 lines
2.6 KiB
Markdown
---
|
|
title: "addRouteMiddleware"
|
|
description: 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/`](/docs/guide/directory-structure/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/configuration/nuxt-config#middleware)).
|
|
::
|
|
|
|
## Usage
|
|
|
|
```js
|
|
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](/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 }
|
|
)
|
|
})
|
|
```
|