provide() Provide a Dependency to Descendants
Last updated: 2026-10-22
provide() Provide a Dependency to Descendants
provide() exposes data from an ancestor so any descendant can inject() it — no prop drilling through every level.
| Group | Dependency Injection |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
provide("theme", ref("dark"))
provide("config", readonly(config)) // recommended: provide readonly⚙️ Arguments
| key | A string or Symbol key |
|---|---|
| value | Any value (refs stay reactive across the boundary) |
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
The child shows 'Injected theme: dark'.💡 Key Points
💡 Tip Provide refs or reactive objects to keep reactivity; plain values are snapshots.
⚠️ Warning Provide readonly to stop any descendant from mutating ancestor state.
ℹ️ Note Prefer Symbol keys in large projects to avoid name clashes.
🏷️ Related Dependency Injection
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from props?
A Props are explicit level by level; provide/inject skips levels for theme or config style context.
Q Can provided data be mutated?
A Technically yes, so provide readonly state or mutation helpers.
Q Can keys clash?
A The nearest provider wins; Symbol keys avoid clashes entirely.
