Solve prop drilling natively in Vue.
1The Prop Drilling Problem
When you need to pass data from a top-level component down to a deeply nested child, passing it as a prop through every single component in the middle (prop drilling) becomes a maintenance nightmare.
2Provide and Inject
provide and inject solve this. An ancestor component acts as a dependency provider for all its descendants. Any descendant component, regardless of how deep it is, can inject dependencies provided by ancestors up in its active instance tree.
3Working with Reactivity
When providing reactive state (like ref), it is highly recommended to keep any mutations to that state inside the *provider*. If the child needs to mutate it, the provider should provide a function (method) that mutates the state, and the child can inject and call that function.
4Step-by-Step Breakdown
Usually, you pass data from parent to child using Props. But what if you need to pass data from a parent to a deeply nested child (e.g., 5 levels deep)?
Vue solves "Prop Drilling" with provide and inject. A parent component can provide a value, and ANY component inside its tree can inject it.
Which function allows a parent component to make data available to all of its descendants, regardless of how deeply nested they are?
- →supply
- →provide
- →send
Deep down in the component tree, the child component uses inject to grab that value. It does not need to declare any props!
Which function is used by a descendant component to retrieve data that was provided by an ancestor?
- →receive
- →get
- →inject
You can provide ref or reactive state too! This means the deeply nested child can react to changes made by the ancestor.
What if you inject a key that was never provided? It returns undefined. You can prevent this by passing a default value as the second argument.
How do you specify a default value of "guest" when injecting a "userRole" that might not have been provided?
- →"guest"
- →{ default: "guest" }
By default, injected reactive state can be mutated by the child. To prevent this (and enforce one-way data flow), wrap the provided value in readonly().
Provide/Inject is powerful, but for true global state management across an entire application, you should use Pinia (Vue's official store).
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Providing an Accessible Preference Context
provide('highContrast', isHighContrast) lets any deeply nested component — form inputs, icons, custom widgets — inject the user's accessibility preference and adjust its own rendering without every intermediate layout component needing to know or forward that prop.
// Root: provide('highContrast', ref(false));
// Any descendant: const highContrast = inject('highContrast');SEO Implications
- 1
Misuse Can Silently Strip Content, Not Search Engines Specifically
Because inject() returns undefined silently when a key was never provided (unless you pass a default), a component that conditionally renders its main content only with v-if="injectedValue" can end up rendering nothing at all in a route where the expected provider isn't actually an ancestor — an easy way to accidentally strip content from a page's HTML without any console error.
Best Practices
Use Symbols as Injection Keys in Larger Apps
String keys like 'theme' can silently collide if two unrelated features pick the same name. Declaring export const ThemeKey = Symbol('theme') and using it for both provide(ThemeKey, ...) and inject(ThemeKey) guarantees uniqueness and lets TypeScript infer the injected value's type via InjectionKey<T>.
Frequent Bugs
Injecting a value with no default in a component that can be used standalone.
const theme = inject('theme') returns undefined with no warning if no ancestor called provide('theme', ...) — a reusable component dropped into someone else's app can silently misbehave. Always supply a second argument, inject('theme', 'light'), so there's a sane fallback.
Real-World Examples
A Form Library's Shared Validation Context
A <FormGroup> root component provides a shared validation-errors object; every nested <FormInput> injects it and reads its own field's error by name, so adding a new input to a form never requires threading an errors prop down through wrapper divs.
// FormGroup.vue
provide('formErrors', errors);
// FormInput.vue
const errors = inject('formErrors', {});