provideinject

Provide/inject is a dependency injection mechanism in Vue.js that lets an ancestor component provide data or services to descendant components without passing props through every intermediate component. It is commonly used for sharing global resources such as themes, localization, or plugin utilities across a component subtree.

In Vue 2, a component can declare provide either as an object or as a function returning an object. The provided properties are then available to descendants that declare matching inject entries. Inject can be specified as an array of keys or as an object that maps local names to a source key with an optional default.

Example

Parent:

provide: {

theme: 'dark',

apiClient: apiClientInstance

}

Child:

inject: ['theme', 'apiClient']

Or with defaults:

inject: {

theme: { from: 'theme', default: 'light' },

locale: { from: 'locale', default: 'en' }

}

Reactivity and behavior

In Vue 2, provided values are not reactive by default; to share reactive state, provide a reactive object (such as a data object or Vue.observable). In Vue 3, provide/inject supports reactive values more naturally: if you provide a reactive object or a ref, injected values reflect changes accordingly, especially when used with the Composition API.

Scope and limitations

Provide/inject operates along the component hierarchy and is not intended as a general event bus or two-way binding mechanism. Overuse can reduce component clarity, so it is best applied to cross-cutting concerns or shared services rather than routine data passing. It is available in both Vue 2 and Vue 3, with differences mainly in reactivity semantics and API usage in the Composition API.