Suggest an edit

Improve this article

Refine the answer for “What is provide/inject?”. 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 lets you "pass" data down the component tree without a chain of props → props → props.**

This is convenient when:

- the nesting is deep,
- many child components need the data,
- passing it through props is inconvenient.

---

## A simple explanation

#### `provide` - the parent **provides** a value

#### `inject` - the descendant **receives** that value

A rough analogy:
The parent puts data into a "shared box" →
any child can take it out of the box.

---

## A simple example

### Parent component

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

const theme = ref("light")

provide("theme", theme) // ← sharing the state
</script>

<template>
  <Child />
</template>
```

### A deeply nested component

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

const theme = inject("theme")

console.log(theme.value) // "light"
</script>

<template>
  <p>Theme: {{ theme }}</p>
</template>
```

It does not matter how many levels of nesting are between them, inject still works.

---

## When should you use provide/inject?

Use provide/inject when:

#### Many child components need the data

For example: site theme, language, settings, context.

#### Props become too complex

If you have to pass props through 4-5 levels, that is a sign it is better to use provide/inject.

#### The component is a container or layout

For example, `<Form>` can provide its methods and state to child `<Input>` components.

#### It is a UI component library

Many UI systems (Vuetify, Element Plus) use provide/inject to pass context.

---

## Example: passing an object

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

provide("config", {
  apiUrl: "/api",
  version: 1
})
</script>
```

Receiving it:

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

const config = inject("config")
</script>
```

---

## provide can be made reactive

If you pass a `ref()` or `reactive()`, the child receives reactivity automatically:

```javascript
provide("counter", ref(0))
```

---

## What if inject is not found?

You can specify a default value:

```javascript
const theme = inject("theme", "light")
```

---

## When should you NOT use provide/inject?

- when data is only needed 1 level down → use props
- when you need global state → use Pinia
- when data needs to flow both ways, be careful!

provide/inject does NOT replace a state manager.

---

## Summary (short)

**provide/inject is a Vue tool for passing data from a parent to descendants at any nesting level, without props.**

- `provide(key, value)` - provides data
- `inject(key)` - receives data
- convenient for theming, forms, contexts, libraries
- works with reactive data

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.