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.