Provide / Inject | Vue.js

Creating an Application
Reactivity Fundamentals
Class and Style Bindings
Conditional Rendering
Fallthrough Attributes
Single-File Components
Server-Side Rendering (SSR)
Production Deployment
TS with Composition API
Render Functions & JSX
Vue and Web Components
Animation Techniques
This page assumes you've already read the Components Basics. Read that first if you are new to components.
Usually, when we need to pass data from the parent to a child component, we use props. However, imagine the case where we have a large component tree, and a deeply nested component needs something from a distant ancestor component. With only props, we would have to pass the same prop across the entire parent chain:
Notice although the <Footer> component may not care about these props at all, it still needs to declare and pass them along just so <DeepChild> can access them. If there is a longer parent chain, more components would be affected along the way. This is called "props drilling" and definitely isn't fun to deal with.
We can solve props drilling with provide and inject. A parent component can serve as a dependency provider for all its descendants. Any component in the descendant tree, regardless of how deep it is, can inject dependencies provided by components up in its parent chain.
To provide data to a component's descendants, use the provide() function:
If not using <script setup>, make sure provide() is called synchronously inside setup():
The provide() function accepts two arguments. The first argument is called the injection key, which can be a string or a Symbol. The injection key is used by descendant components to lookup the desired value to inject. A single component can call provide() multiple times with different injection keys to provide different values.
The second argument is the provided value. The value can be of any type, including reactive state such as refs:
Providing reactive values allows the descendant components using the provided value to establish a reactive connection to the provider component.
To provide data to a component's descendants, use the provide option:
For each property in the provide object, the key is used by child components to locate the correct value to inject, while the value is what ends up being injected.
If we need to provide per-instance state, for example data declared via the data(), then provide must use a function value:
However, do note this does not make the injection reactive. We will discuss making injections reactive below.
In addition to providing data in a component, we can also provide at the app level:
App-level provides are available to all components rendered in the app. This is especially useful when writing plugins, as plugins typically wouldn't be able to provide values using components.
To inject data provided by an ancestor component, use the inject() function:
If multiple parents provide data with the same key, inject will resolve to the value from the closest parent in component's parent chain.
If the provided value is a ref, it will be injected as-is and will not be automatically unwrapped. This allows the injector component to retain the reactivity connection to the provider component.
Full provide + inject Example with Reactivity
Again, if not using <script setup>, inject() should only be called synchronously inside setup():
To inject data provided by an ancestor component, use the inject option:
Injections are resolved before the component's own state, so you can access injected properties in data():
If multiple parents provide data with the same key, inject will resolve to the value from the closest parent in component's parent chain.
Full provide + inject example
When using the array syntax for inject, the injected properties are exposed on the component instance using the same key. In the example above, the property was provided under the key "message", and injected as this.message. The local key is the same as the injection key.
If we want to inject the property using a different local key, we need to use the object syntax for the inject option:
Here, the component will locate a property provided with the key "message", and then expose it as this.localMessage.
By default, inject assumes that the injected key is provided somewhere in the parent chain. In the case where the key is not provided, there will be a runtime warning.