From 0efce136bd52c0f22c0a5f286631b6f87fd5c637 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Sun, 16 Aug 2020 07:44:15 +0100
Subject: [PATCH 1/2] fix: example of app.provide in the migration guide
---
src/guide/migration/global-api.md | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md
index da2c4bf9ef..b2727957bc 100644
--- a/src/guide/migration/global-api.md
+++ b/src/guide/migration/global-api.md
@@ -165,15 +165,13 @@ Similar to using the `provide` option in a 2.x root instance, a Vue 3 app instan
```js
// in the entry
-app.provide({
- guide: 'Vue 3 Guide'
-})
+app.provide('guide', 'Vue 3 Guide')
// in a child component
export default {
inject: {
book: {
- from: guide
+ from: 'guide'
}
},
template: `
{{ book }}
`
From 4249872a8cecd61b8a100816adb1278845600ddf Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Sun, 16 Aug 2020 08:54:49 +0100
Subject: [PATCH 2/2] docs: add app.provide to the API reference
---
src/api/application-api.md | 45 ++++++++++++++++++++++++++++++++++++++
1 file changed, 45 insertions(+)
diff --git a/src/api/application-api.md b/src/api/application-api.md
index 3aa702ede4..5f09974de8 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -192,6 +192,51 @@ app.mount('#my-app')
- **See also:**
- [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+## provide
+
+- **Arguments:**
+
+ - `{string | Symbol} key`
+ - `value`
+
+- **Usage:**
+
+ Sets a value that can be injected into all components within the application. Components should use `inject` to receive the provided values.
+
+ From a `provide`/`inject` perspective, the application can be thought of as the root-level ancestor, with the root component as its only child.
+
+ This method should not be confused with the [provide component option](options-composition.html#provide-inject) or the [provide function](composition-api.html#provide-inject) in the composition API. While those are also part of the same `provide`/`inject` mechanism, they are used to configure values provided by a component rather than an application.
+
+ Providing values via the application is especially useful when writing plugins, as plugins typically wouldn't be able to provide values using components. It is an alternative to using [globalProperties](application-config.html#globalproperties).
+
+ Returns the application instance, allowing calls to be chained.
+
+ :::tip Note
+ The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.
+ :::
+
+- **Example:**
+
+ Injecting a property into the root component, with a value provided by the application:
+
+```js
+import { createApp } from 'vue'
+
+const app = createApp({
+ inject: ['user'],
+ template: `
+
+ {{ user }}
+
+ `
+})
+
+app.provide('user', 'administrator')
+```
+
+- **See also:**
+ - [Provide / Inject](../guide/component-provide-inject.md)
+
## unmount
- **Arguments:**