Skip to content

Commit f828a14

Browse files
committed
docs: allow global injections
1 parent 0d0c915 commit f828a14

File tree

1 file changed

+15
-0
lines changed

1 file changed

+15
-0
lines changed

packages/docs/guide/advanced/navigation-guards.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,21 @@ router.afterEach((to, from, failure) => {
134134

135135
Learn more about navigation failures on [its guide](./navigation-failures.md).
136136

137+
## Global injections within guards
138+
139+
Since Vue 3.3, it is possible to use `inject()` within navigation guards. This is useful for injecting global properties like the [pinia stores](https://pinia.vuejs.org). Anything that is provided with `app.provide()` is also accessible within `router.beforeEach()`, `router.beforeResolve()`, `router.afterEach()`:
140+
141+
```ts
142+
// main.ts
143+
const app = createApp(App)
144+
app.provide('global', 'hello injections')
145+
146+
// router.ts or main.ts
147+
router.beforeEach((to, from) => {
148+
console.log(inject('global')) // -> 'hello injections'
149+
})
150+
```
151+
137152
## Per-Route Guard
138153

139154
You can define `beforeEnter` guards directly on a route's configuration object:

0 commit comments

Comments
 (0)