provide Provide to Descendants
Last updated: 2026-10-22
provide Provide to Descendants
The provide option supplies data downwards — an object for static values, a function for values derived from this.
| Group | Options: Composition & Misc |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
data() { return { theme: "dark" } },
provide() {
return { theme: this.theme } // note: a snapshot
}
}⚙️ Arguments
| value | An object or a function returning one (the function form can use this) |
|---|
Returns：No return value
▶ Example
Edit the code below and see the live result:
Output：
The deep child shows 'Injected theme: dark'.💡 Key Points
⚠️ Warning Plain object literals are snapshots — provide refs for reactivity.
💡 Tip Keep key names aligned with the Composition API for easy migration.
ℹ️ Note The options form uses plain object keys.
🏷️ Related Composition & Misc
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why does a provided data value not update?
A It snapshots on init — provide a reactive object instead.
Q Can it mix with the Composition API?
A Yes — the mechanism is shared, keyed by name.
Q When use the function form?
A When values derive from this.
