Vue.js: provide / inject

<!-- ❌ Broken version: 5 layers of prop drilling -->
<!-- App.vue -->
<Layout :theme="theme" :user="user" :locale="locale">
  <router-view />
</Layout>

<!-- Layout.vue -->
<Header :theme="theme" :user="user" :locale="locale" />

<!-- Header.vue -->
<UserMenu :theme="theme" :user="user" :locale="locale" />

<!-- UserMenu.vue -->
<ThemeButton :theme="theme" />
<LocaleSelector :locale="locale" />

<!-- App.vue ancestor -->
<script setup>
const { ref, provide } = Vue

const theme = ref('light')
const user = ref({ name: 'Alice' })
const locale = ref('zh-CN')

// ✅ Provide once, every descendant can inject
provide('theme', theme)
provide('user', user)
provide('locale', locale)
</script>

<!-- UserMenu.vue any deep descendant -->
<script setup>
const { inject } = Vue

// ✅ Get it directly, no prop pass-through needed
const theme = inject('theme')
const user = inject('user')
const locale = inject('locale')
</script>

<template>
  <button :class="theme">Toggle {{ user.name }}</button>
  <p>{{ locale }}</p>
</template>

<!-- App.vue ancestor component -->
<script setup>
const { ref, provide } = Vue

const theme = ref('light')
const user = { name: 'Alice' }

// 1. Provide a static value
provide('appName', 'My Admin')

// 2. Provide reactive data (ref)
provide('theme', theme)

// 3. Provide reactive data (reactive)
provide('user', user)

// 4. Provide a method
provide('updateUser', (newUser) => {
  user.value = newUser
})
</script>

<!-- Child.vue any descendant component -->
<script setup>
const { inject } = Vue

// 1. Basic injection
const theme = inject('theme')

// 2. With a default value (used when no ancestor provides it)
const theme = inject('theme', 'light')

// 3. With a factory function as the default
const theme = inject('theme', () => 'light')

// 4. Type assertion (TypeScript)
const theme = inject<string>('theme', 'light')
</script>

<!-- Ancestor.vue -->
<script setup>
const { ref, provide } = Vue

const count = ref(0)
const user = reactive({ name: 'Alice', age: 25 })

provide('count', count)        // ref
provide('user', user)          // reactive
provide('config', { theme: 'dark' })  // object
provide('reset', () => { count.value = 0 })  // method
</script>

<!-- DeepChild.vue (any depth) -->
<script setup>
const { inject } = Vue

const count = inject('count')        // reactive
const user = inject('user')          // reactive
const config = inject('config')      // plain object
const reset = inject('reset')        // function

// Modify
function increment() {
  count.value++  // ✅ The ancestor reacts too
}
</script>

A single green-bordered panel inside the grey middle layer, first line "Default label: 0" — the ancestor never provides label, so the inject fallback kicks in.
Click "+1" twice → the number becomes 2; click "Reset" → back to 0. The middle Toolbar layer never passes any data.

<!-- keys.js - central place for all provide keys -->
<script>
export const THEME_KEY = Symbol('theme')
export const USER_KEY = Symbol('user')
export const LOCALE_KEY = Symbol('locale')
export const CONFIG_KEY = Symbol('config')
</script>

<!-- Ancestor.vue ancestor component -->
<script setup>
const { provide, ref } = Vue
import { THEME_KEY, USER_KEY, LOCALE_KEY } from './keys'

provide(THEME_KEY, ref('light'))
provide(USER_KEY, ref({ name: 'Alice' }))
provide(LOCALE_KEY, ref('zh-CN'))
</script>

<!-- DeepChild.vue any descendant -->
<script setup>
const { inject } = Vue
import { THEME_KEY } from './keys'

// ✅ Type-safe: you must use the Symbol to inject
const theme = inject(THEME_KEY)
const user = inject(USER_KEY)
</script>

<!-- Ancestor.vue -->
<script setup>
const { ref, reactive, provide } = Vue

// 1. Provide a ref (reactive)
const count = ref(0)
provide('count', count)

// 2. Provide a reactive object (reactive)
const user = reactive({ name: 'Alice' })
provide('user', user)

// 3. Provide a read-only object (not reactive)
const config = { theme: 'dark' }
provide('config', config)
</script>

<!-- Way 1: the ancestor modifies it directly (recommended) -->
<!-- Ancestor.vue -->
<script setup>
const { ref, provide } = Vue

const theme = ref('light')
provide('theme', theme)

function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

<!-- Way 2: a descendant modifies it through the injected reference -->
<!-- DeepChild.vue -->
<script setup>
const { inject } = Vue

const theme = inject('theme')

function toggleTheme() {
  theme.value = 'dark'  // ✅ You're changing the ref, so the ancestor and other descendants react
}
</script>

// keys.js
export const THEME_KEY = Symbol('theme')

<!-- App.vue ancestor -->
<script setup>
const { ref, provide } = Vue
import { THEME_KEY } from './keys'

const theme = ref('light')
provide(THEME_KEY, theme)
</script>

<!-- ThemeButton.vue descendant -->
<script setup>
const { inject } = Vue
import { THEME_KEY } from './keys'

const theme = inject(THEME_KEY)
</script>

<template>
  <button @click="theme.value = theme === 'light' ? 'dark' : 'light'">
    {{ theme === 'light' ? '🌞' : '🌙' }}
  </button>
</template>

// keys.js
export const AUTH_KEY = Symbol('auth')

<!-- App.vue -->
<script setup>
const { reactive, provide } = Vue
import { AUTH_KEY } from './keys'

const auth = reactive({
  user: null,
  isLoggedIn: false,
  login(credentials) { /* API call */ },
  logout() { this.user = null; this.isLoggedIn = false }
})
provide(AUTH_KEY, auth)
</script>

<!-- UserMenu.vue descendant -->
<script setup>
const { inject } = Vue
import { AUTH_KEY } from './keys'

const auth = inject(AUTH_KEY)
</script>

<template>
  <div v-if="auth.isLoggedIn">{{ auth.user.name }}</div>
  <button v-else @click="auth.login(creds)">Login</button>
</template>

// keys.js
export const I18N_KEY = Symbol('i18n')

<!-- App.vue -->
<script setup>
const { ref, provide, computed } = Vue
import { I18N_KEY } from './keys'

const messages = {
  'en-US': { hello: 'Hello', welcome: 'Welcome' },
  'es-ES': { hello: 'Hola', welcome: 'Bienvenido' }
}

const locale = ref('en-US')
const t = computed(() => (key) => messages[locale.value][key])

provide(I18N_KEY, { locale, t })
</script>

<!-- Hello.vue descendant -->
<script setup>
const { inject } = Vue
import { I18N_KEY } from './keys'

const { t } = inject(I18N_KEY)
</script>

<template>
  <h1>{{ t('hello') }}, {{ t('welcome') }}</h1>
</template>

<!-- App.vue -->
<script setup>
const { ref, provide } = Vue

const loading = ref(false)
provide('loading', loading)
</script>

<!-- AnyComponent.vue descendant -->
<script setup>
const { inject } = Vue
const loading = inject('loading')

async function fetchData() {
  loading.value = true
  await fetch('/api/data')
  loading.value = false
}
</script>

<template>
  <button @click="fetchData">Refresh</button>
</template>

<!-- App.vue -->
<script setup>
const { ref, reactive, provide } = Vue

const appState = reactive({
  theme: 'light',
  user: { name: 'Alice' },
  permissions: ['read', 'write'],
  config: { sidebar: true }
})
provide('appState', appState)
</script>

Two dashed-border panels are rendered (DeepChild, then GrandChild).
Inside the innermost panel you see User: Alice (admin), i18n: Home | Cart, Cart: 1 item(s), $999, and a green button reading Toggle theme (current: light).
Clicking the button flips the whole page to the dark palette and the label becomes dark.

DeepChild middle layer (does not consume provide)
  GrandChild middle layer
    User: Alice (admin)
    i18n: Home | Cart
    Cart: 1 item(s), $999
    [ Toggle theme (current: light) ]

# after clicking the button: background #1f2937, text #f9fafb
    User: Alice (admin)
    i18n: Home | Cart
    Cart: 1 item(s), $999
    [ Toggle theme (current: dark) ]

Three lines are rendered: THEME_KEY: light, ANOTHER_THEME_KEY: dark, and a grey hint that reads Both Symbols share the same description but never collide.
The two values stay independent, proving the keys don't collide.

THEME_KEY: light
ANOTHER_THEME_KEY: dark
Both Symbols share the same description but never collide