diff --git a/packages/docs/guide/advanced/navigation-guards.md b/packages/docs/guide/advanced/navigation-guards.md index c39e06298..865031ace 100644 --- a/packages/docs/guide/advanced/navigation-guards.md +++ b/packages/docs/guide/advanced/navigation-guards.md @@ -134,6 +134,21 @@ router.afterEach((to, from, failure) => { Learn more about navigation failures on [its guide](./navigation-failures.md). +## Global injections within guards + +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()`: + +```ts +// main.ts +const app = createApp(App) +app.provide('global', 'hello injections') + +// router.ts or main.ts +router.beforeEach((to, from) => { + console.log(inject('global')) // -> 'hello injections' +}) +``` + ## Per-Route Guard You can define `beforeEnter` guards directly on a route's configuration object: