← All notes

Answer: Props pass data from parent to child, but a deep tree would have to thread the same prop through every ancestor. provide and inject skip that props drilling.

The pattern

A parent can be a dependency provider for all of its descendants. Any descendant, however deep, can inject dependencies provided up the parent chain.

Runtime rules

provide() can only be used inside setup(). By default an instance inherits its parent's provides object. When the instance provides its own values, it makes a new provides object whose prototype is the parent provides object. inject() can only be used inside setup() or functional components.

See also

• vue-props
• vue-composables

Claims

• id: C1 claim: provide and inject are the way to avoid props drilling. source: S1 evidence: "We can solve props drilling with provide and inject."

• id: C2 claim: A parent can provide dependencies for all of its descendants. source: S1 evidence: "A parent component can serve as a dependency provider for all its descendants."

• id: C3 claim: provide() can only be used inside setup(). source: S2 evidence: "provide() can only be used inside setup()."

• id: C4 claim: inject() can only be used inside setup() or functional components. source: S2 evidence: "inject() can only be used inside setup() or functional components."

Sources

• [S1] Provide / Inject. Vue.js docs. https://vuejs.org/guide/components/provide-inject.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] runtime-core apiInject. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/runtime-core/src/apiInject.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_107m26ha,
  author = {{iinventedlight}},
  title = {{Vue provide and inject skip prop drilling across deep trees}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-provide-inject/},
  note = {Permanent ID iil:note:107m26ha. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-provide-inject.md.