Skip to content

Commit d7b4cc8

Browse files
Add app.provide to the API reference (#411)
* fix: example of app.provide in the migration guide * docs: add app.provide to the API reference
1 parent 090b7be commit d7b4cc8

File tree

2 files changed

+47
-4
lines changed

2 files changed

+47
-4
lines changed

src/api/application-api.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,51 @@ app.mount('#my-app')
192192
- **See also:**
193193
- [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
194194

195+
## provide
196+
197+
- **Arguments:**
198+
199+
- `{string | Symbol} key`
200+
- `value`
201+
202+
- **Usage:**
203+
204+
Sets a value that can be injected into all components within the application. Components should use `inject` to receive the provided values.
205+
206+
From a `provide`/`inject` perspective, the application can be thought of as the root-level ancestor, with the root component as its only child.
207+
208+
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.
209+
210+
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).
211+
212+
Returns the application instance, allowing calls to be chained.
213+
214+
:::tip Note
215+
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.
216+
:::
217+
218+
- **Example:**
219+
220+
Injecting a property into the root component, with a value provided by the application:
221+
222+
```js
223+
import { createApp } from 'vue'
224+
225+
const app = createApp({
226+
inject: ['user'],
227+
template: `
228+
<div>
229+
{{ user }}
230+
</div>
231+
`
232+
})
233+
234+
app.provide('user', 'administrator')
235+
```
236+
237+
- **See also:**
238+
- [Provide / Inject](../guide/component-provide-inject.md)
239+
195240
## unmount
196241

197242
- **Arguments:**

src/guide/migration/global-api.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -165,15 +165,13 @@ Similar to using the `provide` option in a 2.x root instance, a Vue 3 app instan
165165

166166
```js
167167
// in the entry
168-
app.provide({
169-
guide: 'Vue 3 Guide'
170-
})
168+
app.provide('guide', 'Vue 3 Guide')
171169

172170
// in a child component
173171
export default {
174172
inject: {
175173
book: {
176-
from: guide
174+
from: 'guide'
177175
}
178176
},
179177
template: `<div>{{ book }}</div>`

0 commit comments

Comments
 (0)