How to Use Provide and Inject in Vue for Dependency Injection

In Vue, use provide in a parent component to supply data or functions, and inject in a child or descendant component to access that data. This allows sharing values deeply without passing props through every level.

Syntax

The provide option in a Vue component defines what data or functions it shares. The inject option in a child component specifies which provided keys it wants to receive.

Provide: an object or a function returning an object with keys and values to share.

Inject: an array of keys or an object mapping keys to default values.

javascript

export default {
  provide() {
    return {
      message: 'Hello from parent',
      count: 42
    }
  },
  // ...
}

export default {
  inject: ['message', 'count'],
  // ...
}

Example

This example shows a parent component providing a message and a child component injecting and displaying it. The child accesses the provided data without props.

vue

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  provide() {
    return {
      message: 'Hello from Parent',
      number: 123
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Injected message: {{ message }}</p>
    <p>Injected number: {{ number }}</p>
  </div>
</template>

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

const message = inject('message')
const number = inject('number')
</script>

Output

Injected message: Hello from Parent
Injected number: 123

Common Pitfalls

• Not reactive: Provided values are not reactive by default. To share reactive data, provide a reactive object or use ref.
• Missing keys: Injected keys must match exactly the provided keys, or provide default values to avoid undefined.
• Scope: Provide/inject works only between ancestor and descendant components, not siblings.

javascript

export default {
  provide() {
    return {
      count: 0 // Not reactive
    }
  }
}

// Child tries to inject count and update it, but won't react to changes

// Correct way:
import { reactive } from 'vue'

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

Quick Reference

• Provide: Use in parent to share data: provide() { return { key: value } }
• Inject: Use in child to receive data: inject('key') or inject(['key1', 'key2'])
• Reactivity: Provide reactive objects or refs for reactive sharing
• Scope: Works only between ancestor and descendant components

Key Takeaways

Use provide in a parent component to share data or functions with descendants.

Use inject in child components to access provided data without passing props.

Provide/inject is not reactive by default; use reactive or ref to share reactive data.

Provide/inject works only between ancestor and descendant components, not siblings.

Always match inject keys exactly or provide default values to avoid undefined.