From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 11 May 2023 10:51:46 +0000 (+0200)
Subject: docs: allow global injections
X-Git-Tag: v4.2.0~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f828a14da08debc60b0c0155c94c09864cff5389;p=thirdparty%2Fvuejs%2Frouter.git

docs: allow global injections
---

diff --git a/packages/docs/guide/advanced/navigation-guards.md b/packages/docs/guide/advanced/navigation-guards.md
index c39e0629..865031ac 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: