1---
2name: Provide / Inject
3description: Pass data through component tree without prop drilling
4---
5 
6# Provide / Inject
7 
8Provide data from ancestor components to any descendant, avoiding prop drilling.
9 
10## Basic Usage
11 
12```vue
13<!-- Provider.vue -->
14<script setup lang="ts">
15import { provide, ref } from 'vue'
16 
17const message = ref('hello')
18provide('message', message)
19</script>
20```
21 
22```vue
23<!-- DeepChild.vue (any level deep) -->
24<script setup lang="ts">
25import { inject } from 'vue'
26 
27const message = inject('message')
28</script>
29```
30 
31## Typing with InjectionKey
32 
33Use `InjectionKey` for type safety between provider and injector:
34 
35```ts
36// keys.ts
37import type { InjectionKey, Ref } from 'vue'
38 
39export const messageKey = Symbol() as InjectionKey<Ref<string>>
40export const countKey = Symbol() as InjectionKey<number>
41```
42 
43```vue
44<!-- Provider.vue -->
45<script setup lang="ts">
46import { provide, ref } from 'vue'
47import { messageKey } from './keys'
48 
49const message = ref('hello')
50provide(messageKey, message)
51</script>
52```
53 
54```vue
55<!-- Injector.vue -->
56<script setup lang="ts">
57import { inject } from 'vue'
58import { messageKey } from './keys'
59 
60const message = inject(messageKey) // Ref<string> | undefined
61</script>
62```
63 
64## Default Values
65 
66```ts
67// Simple default
68const value = inject('message', 'default value')
69 
70// Factory function (for expensive defaults)
71const value = inject('key', () => new ExpensiveClass(), true)
72//                                                       ^ treat as factory
73```
74 
75## App-Level Provide
76 
77Available to all components:
78 
79```ts
80// main.ts
81import { createApp } from 'vue'
82 
83const app = createApp(App)
84app.provide('globalConfig', { theme: 'dark' })
85```
86 
87## Reactive Provide/Inject
88 
89Provide reactive values for automatic updates:
90 
91```vue
92<!-- Provider.vue -->
93<script setup lang="ts">
94import { provide, ref } from 'vue'
95 
96const count = ref(0)
97provide('count', count)
98</script>
99```
100 
101The injected value maintains reactivity connection.
102 
103## Mutations Best Practice
104 
105Keep mutations in the provider, expose update functions:
106 
107```vue
108<!-- Provider.vue -->
109<script setup lang="ts">
110import { provide, ref, readonly } from 'vue'
111 
112const location = ref('North Pole')
113 
114function updateLocation(newLocation: string) {
115  location.value = newLocation
116}
117 
118provide('location', {
119  location: readonly(location), // Prevent direct mutation
120  updateLocation
121})
122</script>
123```
124 
125```vue
126<!-- Injector.vue -->
127<script setup lang="ts">
128import { inject } from 'vue'
129 
130const { location, updateLocation } = inject('location')!
131</script>
132 
133<template>
134  <button @click="updateLocation('South Pole')">
135    {{ location }}
136  </button>
137</template>
138```
139 
140## Using Symbol Keys
141 
142Recommended for libraries and large apps to avoid collisions:
143 
144```ts
145// keys.ts
146export const myKey = Symbol('myKey')
147 
148// provider
149provide(myKey, value)
150 
151// injector
152inject(myKey)
153```
154 
155## Type Helpers
156 
157```ts
158// String key with explicit type
159const foo = inject<string>('foo')
160//    ^? string | undefined
161 
162// With default (removes undefined)
163const foo = inject<string>('foo', 'default')
164//    ^? string
165 
166// Force non-undefined (use when certain it's provided)
167const foo = inject('foo') as string
168```
169 
170<!--
171Source references:
172- https://vuejs.org/guide/components/provide-inject.html
173- https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject
174-->
175