Suggest an edit

Improve this article

Refine the answer for “Why is provide/inject needed?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`provide` **/** `inject` is a Vue mechanism that lets you **pass data deep down the component tree**, bypassing intermediate levels.

In other words:

> `provide/inject` **is needed when a parent needs to pass data to "grandchildren," "great-grandchildren," and so on, without threading props through every intermediate component.**

It's an alternative to "props drilling."

---

## The problem provide/inject solves

Without provide/inject:

```
Parent → Child → GrandChild → DeepChild
```

To pass data from Parent to DeepChild:

- you have to pass props at every level
-> inconvenient, a lot of extra code.

With provide/inject:

Parent → DeepChild directly
(they don't need to be related in the template)

---

## How does provide/inject work?

### The parent provides a value (provide)

```js
import { provide } from 'vue'

provide('theme', 'dark')
```

### A child component (at any depth) injects it (inject)

```js
import { inject } from 'vue'

const theme = inject('theme') // 'dark'
```

---

## Example usage in the Composition API

#### Parent

```vue
<script setup>
import { provide } from 'vue'

provide('color', 'blue')
</script>
```

#### A deeply nested descendant

```vue
<script setup>
import { inject } from 'vue'

const color = inject('color')
</script>

<template>
  <p :style="{ color }">Text</p>
</template>
```

---

## Where is provide/inject used?

#### 1. In UI libraries

Vuetify, Element Plus, and Naive UI use it for:

- theming
- default configurations
- system parameters
- contexts inside components

#### 2. Theming

```js
provide('theme', 'dark')
```

#### 3. A form + its fields

Parent-Form → Child-Input:

```js
provide('form', formContext)
```

#### 4. Global component configs

```js
provide('global-config', config)
```

#### 5. Modals, portals, tooltips

Passing an ID/context.

#### 6. State management in small projects

A mini-alternative to Vuex/Pinia:

```js
provide('store', reactive({ count: 0 }))
```

---

## Important details of provide/inject

#### 1. Reactivity works, but not automatically

If you pass a `reactive` or `ref` into provide, it stays reactive.

Example:

```js
const state = reactive({ count: 0 })
provide('state', state)
```

In inject:

```js
const state = inject('state')
state.count++ // reactive
```

#### 2. inject cannot change provide (just like props)

This is a one-way flow.

#### 3. provide can be overridden at any level

Each component can supply its own version of a key.

#### 4. inject can be given a default value

```js
inject('theme', 'light')
```

---

## Summary (ideal for an interview)

> `provide/inject` **is a Vue mechanism for passing data "down the tree" to any depth, without having to thread props through every intermediate component.**
> **It's used for configurations, themes, contexts, forms, global parameters, and building UI libraries.**
> **It supports reactivity if you pass a ref/reactive.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts440 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.