What is provide/inject?

VueJunior~1 min read

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

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.