Teaches Vue's provide/inject API for dependency injection across components. Use when deeply nested components need access to ancestor data without threading props through intermediate layers.
When managing data between parent and child components, Vue gives us the ability to use something known as props to pass data down from parent to child. Props can only flow in one direction, from parent components to child components (and further down). When state changes occur on parent elements, Vue will re-render components that depend on those values.
Using props works well in most cases. However, when working in large applications with a large number of components in the component tree, props can become hard to maintain since props need to be declared in each and every component in the component tree.
provide() in a parent or ancestor component to make data available to all descendantsinject() in child components to access provided dataapp.provide() for data needed across the entire application (e.g., plugins)When considering how data can be managed between a large number of components, it's often best to work towards a solution that allows the management of application-level state in a maintainable and manageable manner (e.g. creating a reusable store, using Pinia, etc.). We talk about this in more detail in the State Management guide.
However, Vue also provides a certain pattern to help avoid the need for complex prop drilling in a Vue application known as the provide/inject pattern.
The provide() function in Vue allows us to pass data through a component tree without the need to prop-drill (i.e., pass props down manually at every level). On the other hand, the inject() option is used in child components to access the provided data or methods from their parent or any ancestor component.
We'll go through a simple example to illustrate how this can be done. Suppose we have a parent component called App that wants to share a piece of data with its child component, ChildComponent. Instead of passing this data as a prop, we can use provide() in the parent component to make the data available to all its child components.
<template>
<div id="app">
<ChildComponent />
</div>
</template>
<script setup>
import { provide } from "vue";
import ChildComponent from "./components/ChildComponent";
provide("data", "Data from parent!");
</script>
We can then access this provided data in the ChildComponent with the help of the inject() function.
<template>
<div>
<p>{{ data }}</p>
</div>
</template>
<script setup>
import { inject } from "vue";
const data = inject("data");
</script>
By specifying inject("data") in the child component (ChildComponent), we directly access the provided data value from the parent component. We then bind data to the template to display its value.
With provide/inject, we would notice the same behavior even if we had numerous child components within the component hierarchy tree. Data from the parent <App /> component will be rendered in any deeply nested child component without the need to prop-drill data through every component in the tree, thanks to provide/inject!
In addition to being able to provide() data from a parent component, we can lift the provide() up to the app level as well (i.e. where we instantiate our Vue application).
import { createApp } from "vue";
import App from "./App.vue";
import "./styles.css";
const app = createApp(App);
// app-level provide
app.provide("data", "Data from parent!");
app.mount("#app");
Since app-level provides make data available to all components, they are often helpful when creating plugins — self-contained code that adds functionality to the entire Vue app.
When do we choose between props and the provide/inject pattern? Both approaches have their advantages and disadvantages.
The provide/inject pattern is most suitable for application-wide client data, such as theme information, locale/language preferences, and user authentication details. These types of data are better managed with provide/inject since any component within the application may require access to them at any given time.
On the other hand, props are ideal when data needs to be isolated within a specific set of components only.