docs: allow global injections

diff --git a/packages/docs/guide/advanced/navigation-guards.md b/packages/docs/guide/advanced/navigation-guards.md
index c39e062983b42f678893ab87d646ab6c031e2bf3..865031acef84c84ffc0fefcf91e577fb2cf5d913 100644 (file)
--- 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: