inject Inject Ancestor Data
Last updated: 2026-10-22
inject Inject Ancestor Data
The inject option declares dependencies — an array without defaults, or an object with from and default.
| Group | Options: Composition & Misc |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
inject: ["theme"],
// or with a default
inject: {
theme: { from: "theme", default: "light" }
}
}⚙️ Arguments
| value | An array of keys or an object with from and default |
|---|
Returns：Injected values land on the instance as this.xxx
▶ Example
Edit the code below and see the live result:
Output：
Without a provider it shows 'Theme: light by default'.💡 Key Points
💡 Tip In the object form, from names the provider key.
⚠️ Warning Avoid shared object defaults — they leak across instances.
ℹ️ Note Injected refs stay reactive and auto-unwrap in templates.
🏷️ Related Composition & Misc
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Array or object form?
A Use the object form for defaults or aliasing.
Q Does a missing provider throw?
A The array form yields undefined; the object form falls back.
Q Can methods be injected?
A Yes — provide functions alongside readonly state.
