1---
2title: Use Factory Functions for Non-Primitive Inject Default Values
3impact: MEDIUM
4impactDescription: Using object literals as default values creates shared references across all consuming components
5type: gotcha
6tags: [vue3, provide-inject, composition-api, memory, shared-state]
7---
8 
9# Use Factory Functions for Non-Primitive Inject Default Values
10 
11**Impact: MEDIUM** - When providing default values for `inject()`, using an object literal creates a single shared reference. All components using that default will share the same object, leading to unexpected state sharing and bugs.
12 
13## Task Checklist
14 
15- [ ] Always use factory functions for object/array default values in inject
16- [ ] Pass `true` as the third argument to enable factory mode in Composition API
17- [ ] Use the object syntax with factory function in Options API
18- [ ] Only use literal defaults for primitive values (strings, numbers, booleans)
19 
20## The Gotcha: Shared Default References
21 
22**Wrong - Object literal creates shared reference:**
23```vue
24<script setup>
25import { inject } from 'vue'
26 
27// WRONG: All components without a provider share this SAME object
28const config = inject('config', { debug: false, apiUrl: '' })
29 
30// If one component does this:
31config.debug = true
32 
33// ALL other components using this default now have debug: true!
34</script>
35```
36 
37**Correct - Factory function creates unique instance:**
38```vue
39<script setup>
40import { inject } from 'vue'
41 
42// CORRECT: Each component gets its own object
43// Third argument `true` indicates the second arg is a factory function
44const config = inject('config', () => ({ debug: false, apiUrl: '' }), true)
45</script>
46```
47 
48## API Explanation
49 
50The `inject()` function has multiple signatures:
51 
52```ts
53// Simple default value (OK for primitives)
54inject(key, defaultValue)
55 
56// Factory function for non-primitives (REQUIRED for objects/arrays)
57inject(key, factoryFunction, true)
58```
59 
60The third argument `true` tells Vue that the second argument is a factory function, not the default value itself.
61 
62## Examples
63 
64### Primitive Defaults (No Factory Needed)
65 
66```vue
67<script setup>
68import { inject } from 'vue'
69 
70// Primitives are safe without factory
71const count = inject('count', 0)
72const name = inject('name', 'Guest')
73const enabled = inject('enabled', false)
74</script>
75```
76 
77### Object Defaults (Factory Required)
78 
79```vue
80<script setup>
81import { inject } from 'vue'
82 
83// Objects MUST use factory
84const user = inject('user', () => ({
85  id: null,
86  name: 'Anonymous',
87  preferences: {}
88}), true)
89 
90const settings = inject('settings', () => ({
91  theme: 'light',
92  language: 'en',
93  notifications: true
94}), true)
95</script>
96```
97 
98### Array Defaults (Factory Required)
99 
100```vue
101<script setup>
102import { inject } from 'vue'
103 
104// Arrays MUST use factory
105const items = inject('items', () => [], true)
106const permissions = inject('permissions', () => ['read'], true)
107</script>
108```
109 
110### Class Instance Defaults (Factory Required)
111 
112```vue
113<script setup>
114import { inject } from 'vue'
115import { Logger } from '@/utils/logger'
116 
117// Class instances MUST use factory
118const logger = inject('logger', () => new Logger({ level: 'warn' }), true)
119</script>
120```
121 
122## Options API Syntax
123 
124In Options API, use the object syntax with a `default` factory function:
125 
126```js
127export default {
128  inject: {
129    // Primitive - can use literal
130    theme: {
131      from: 'theme',
132      default: 'light'
133    },
134 
135    // Object - MUST use factory
136    config: {
137      from: 'config',
138      default: () => ({ debug: false })
139    },
140 
141    // Array - MUST use factory
142    permissions: {
143      from: 'permissions',
144      default: () => []
145    }
146  }
147}
148```
149 
150## Real-World Example: Form Context
151 
152```vue
153<!-- FormProvider.vue -->
154<script setup>
155import { provide, reactive } from 'vue'
156 
157const formContext = reactive({
158  values: {},
159  errors: {},
160  touched: {},
161  isSubmitting: false
162})
163 
164provide('formContext', formContext)
165</script>
166 
167<!-- FormField.vue (might be used outside FormProvider) -->
168<script setup>
169import { inject } from 'vue'
170 
171// Safe default that won't be shared
172const formContext = inject('formContext', () => ({
173  values: {},
174  errors: {},
175  touched: {},
176  isSubmitting: false,
177  // Mark as standalone mode
178  isStandalone: true
179}), true)
180 
181// Component works both inside and outside FormProvider
182</script>
183```
184 
185## TypeScript: Typing Factory Defaults
186 
187```ts
188import { inject } from 'vue'
189import type { InjectionKey } from 'vue'
190 
191interface Config {
192  apiUrl: string
193  debug: boolean
194  features: string[]
195}
196 
197const ConfigKey: InjectionKey<Config> = Symbol('config')
198 
199// TypeScript understands the factory return type
200const config = inject(ConfigKey, () => ({
201  apiUrl: 'https://api.example.com',
202  debug: false,
203  features: []
204}), true)
205```
206 
207## Common Mistake in Testing
208 
209This gotcha often appears in tests where components are rendered without providers:
210 
211```ts
212// test.spec.ts
213import { mount } from '@vue/test-utils'
214import MyComponent from './MyComponent.vue'
215 
216// Without provider, all test instances share the wrong default
217it('test 1', () => {
218  const wrapper = mount(MyComponent)
219  wrapper.vm.config.debug = true // Pollutes other tests!
220})
221 
222it('test 2', () => {
223  const wrapper = mount(MyComponent)
224  // Might fail because debug is still true from test 1
225})
226```
227 
228**Fix: Use factory functions in the component, or provide in tests:**
229 
230```ts
231it('test with provider', () => {
232  const wrapper = mount(MyComponent, {
233    global: {
234      provide: {
235        config: { debug: false, apiUrl: '' }
236      }
237    }
238  })
239})
240```
241 
242## Reference
243- [Vue.js inject() API Reference](https://vuejs.org/api/composition-api-dependency-injection.html#inject)
244- [Vue.js Provide/Inject Guide](https://vuejs.org/guide/components/provide-inject.html)
245