midVue.js
Explain 'Provide' and 'Inject'.
Updated May 4, 2026
Short answer
They allow a grand-parent component to pass data to a deep-nested child without 'prop drilling'.
Deep explanation
The parent provides a dependency, and any component in its descendant tree can inject it. This bypasses all intermediate components. Note that provided values are not reactive by default unless you pass a ref or reactive object.
Real-world example
Passing a global 'User' object or 'Theme' setting down to deeply nested UI components like icons or buttons.
Common mistakes
- Using it as a replacement for Vuex/Pinia in complex state scenarios where tracking changes becomes difficult.
Follow-up questions
- Can you provide a default value to inject?