Provide and inject for deep passing in Vue

Introduction

Provide and inject let you share data easily between components without passing props step-by-step. It helps when many nested components need the same data.

You have a parent component with data many nested children need.

You want to avoid passing props through many layers of components.

You want to share global settings or theme info deep inside your app.

You want to keep components loosely connected but still share data.

You want to provide functions or reactive state to deeply nested components.

Syntax

Vue

import { provide, inject } from 'vue'

// In parent or ancestor component setup()
provide('keyName', value)

// In child or descendant component setup()
const value = inject('keyName')

The keyName is a unique string or symbol to identify the data.

If the injected key is not found, inject returns undefined unless you provide a default value.

Examples

This parent component shares the string 'blue' with key 'color'.

Vue

import { provide } from 'vue'

export default {
  setup() {
    provide('color', 'blue')
  }
}

This child component receives the 'color' value or uses 'red' if not provided.

Vue

import { inject } from 'vue'

export default {
  setup() {
    const color = inject('color', 'red')
    return { color }
  }
}

Provide a reactive object so children can react to changes.

Vue

import { provide, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    provide('state', state)
  }
}

Child component injects the reactive state to use and display.

Vue

import { inject } from 'vue'

export default {
  setup() {
    const state = inject('state')
    return { state }
  }
}

Sample Program

The parent provides a reactive message. The grandchild injects it directly without props. The child is in the middle but does not pass props.

Vue

<template>
  <div>
    <h2>Parent Component</h2>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'

const state = reactive({ message: 'Hello from parent!' })
provide('sharedState', state)
</script>

---

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>Child Component</h3>
    <GrandChildComponent />
  </div>
</template>

<script setup>
import GrandChildComponent from './GrandChildComponent.vue'
</script>

---

<!-- GrandChildComponent.vue -->
<template>
  <div>
    <h4>Grandchild Component</h4>
    <p>{{ sharedState.message }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue'
const sharedState = inject('sharedState')
</script>

Important Notes

Provide and inject work only inside the component setup function.

Injected values are not reactive by default unless you provide reactive objects.

Use symbols as keys to avoid accidental key conflicts in large apps.

Summary

Provide and inject let you share data deeply without passing props through every component.

Use provide in an ancestor and inject in descendants.

Works great for global settings, themes, or shared reactive state.

Practice

1. What is the main purpose of provide and inject in Vue?

easy

A. To replace Vuex for state management in all cases.

B. To share data deeply between ancestor and descendant components without passing props.

C. To handle component lifecycle hooks automatically.

D. To style components globally using CSS variables.

Solution

1. Step 1: Understand the role of provide and inject

   Provide and inject allow passing data from an ancestor component to any descendant without manually passing props through each intermediate component.

2. Step 2: Compare with other options

   Vuex is a separate state management tool, lifecycle hooks handle component events, and CSS variables style components; none of these are the main purpose of provide/inject.

3. Final Answer:

   To share data deeply between ancestor and descendant components without passing props. -> Option B

4. Quick Check:

   Provide/inject = deep data sharing [OK]

Hint: Remember: provide/inject skips prop drilling [OK]

Common Mistakes:

• Thinking provide/inject replaces Vuex completely
• Confusing provide/inject with lifecycle hooks
• Assuming provide/inject is for styling

2. Which of the following is the correct way to use provide in a Vue 3 setup function?

easy

A. provide('key', 'value')

B. provide: { key: 'value' }

C. this.provide = { key: 'value' }

D. const provide = { key: 'value' }

Solution

1. Step 1: Recall provide usage in setup()

   In Vue 3 setup, provide is a function imported from 'vue' and called as provide('key', value).

2. Step 2: Check other options

   const provide = { key: 'value' } is an object, not a function call; this.provide = { key: 'value' } uses this which is not available in setup; provide: { key: 'value' } is invalid syntax.

3. Final Answer:

   provide('key', 'value') -> Option A

4. Quick Check:

   Provide is a function call in setup [OK]

Hint: Use provide('key', value) inside setup() [OK]

Common Mistakes:

• Trying to assign provide as an object
• Using this inside setup()
• Confusing provide option with function call

3. Given this Vue 3 code snippet, what will be logged in the child component?

import { provide, inject } from 'vue';

export default {
  setup() {
    provide('color', 'blue');
  }
}

// In child component
export default {
  setup() {
    const color = inject('color');
    console.log(color);
  }
}

medium

A. 'blue'

B. undefined

C. null

D. An error is thrown

Solution

1. Step 1: Understand provide and inject behavior

   The ancestor provides the key 'color' with value 'blue'. The child injects 'color', so it receives 'blue'.

2. Step 2: Confirm no default value or errors

   Since 'color' is provided, inject returns 'blue', not undefined or null, and no error occurs.

3. Final Answer:

   'blue' -> Option A

4. Quick Check:

   Inject returns provided value 'blue' [OK]

Hint: Inject returns provided value if key matches [OK]

Common Mistakes:

• Expecting undefined if not passed as prop
• Assuming inject returns null by default
• Thinking inject throws error if key missing

4. Identify the error in this Vue 3 code using provide/inject:

export default {
  setup() {
    provide = { theme: 'dark' };
  }
}

export default {
  setup() {
    const theme = inject('theme');
    return { theme };
  }
}

medium

A. The key 'theme' is not provided properly because it is misspelled.

B. inject is missing a default value.

C. provide is incorrectly assigned as an object instead of called as a function.

D. setup() cannot return reactive data.

Solution

1. Step 1: Check provide usage

   Provide must be called as a function: provide('key', value). Here, provide is assigned an object, which is invalid.

2. Step 2: Verify other options

   Inject default value is optional; key spelling matches; setup can return reactive data.

3. Final Answer:

   provide is incorrectly assigned as an object instead of called as a function. -> Option C

4. Quick Check:

   Provide must be called, not assigned [OK]

Hint: Provide is a function call, not an object assignment [OK]

Common Mistakes:

• Assigning provide as an object instead of calling it
• Thinking inject requires default value always
• Confusing setup return rules

5. You want to share a reactive theme object deeply across many nested components using provide/inject. Which approach correctly ensures reactivity is preserved in descendants?

hard

A. Provide a reactive object but inject a copy using { ...injected } to avoid mutation.

B. Provide a plain object and inject it, then wrap it with reactive() in each child.

C. Provide a ref with the reactive object and inject the ref, then use .value in children.

D. Provide a reactive object using reactive() and inject it directly.

Solution

1. Step 1: Understand reactivity with provide/inject

   Provide a reactive object created with reactive() and inject it directly. Vue automatically ensures the injected value is deeply reactive in descendants.

2. Step 2: Analyze other options

   Provide a plain object and inject it, then wrap it with reactive() in each child. uses a plain object (no reactivity) and re-wrapping creates separate instances. Provide a ref with the reactive object and inject the ref, then use .value in children. unnecessarily wraps a reactive object in a ref, adding extra complexity with .value. Provide a reactive object but inject a copy using { ...injected } to avoid mutation. copies the object, breaking the reactivity connection.

3. Final Answer:

   Provide a reactive object using reactive() and inject it directly. -> Option D

4. Quick Check:

   reactive() object + direct provide/inject = preserved reactivity [OK]

Hint: Provide reactive({}) directly and inject without .value [OK]

Common Mistakes:

• Injecting plain objects and expecting reactivity
• Wrapping injected objects again with reactive
• Copying objects and losing reactivity