In Vue 3, what does inject() return when no ancestor provides the key, and how do plain and factory defaults change that?

## What happens when nothing is provided `inject()` walks up from the component's parent to find the key, and finally checks the app-level provides. If it finds nothing: - the call returns `undefined`; - if no default was passed, a development build logs `injection "size" not found.` (with your key in place of `size`); - production builds return `undefined` silently. The Vue docs describe this as `inject` assuming by default that the key is provided somewhere in the parent chain, and warning when it is not. ## Plain defaults A second argument turns a required injection into an optional one: ```ts import { inject } from 'vue' const size = inject('size', 'md') // 'md' when no ancestor provides 'size' ``` Details that matter: 1. **Any second argument counts.** The check is whether a second argument was passed, so `inject('form', null)` returns `null` with no warning when there is no provider. That is a useful idiom for "works inside a form or alone". 2. **A provided `undefined` still wins.** If an ancestor provides the key with the value `undefined`, the key exists and the default is not used. 3. **Objects are shared.** `inject('options', {})` evaluates `{}` on every call anyway, but a default object you create once at module scope would be shared by every component that falls back to it. ## Factory defaults A function passed as the default is returned **as the value**, because a function is a legitimate thing to inject (a callback, a formatter). To have Vue call it instead, pass `true` as the third argument: ```ts // Returns the function itself when there is no provider const fmt = inject('formatter', (n: number) => n.toFixed(2)) // Calls the factory only when there is no provider const cache = inject('cache', () => new Map<string, unknown>(), true) ``` The factory form helps when the default is: - **expensive** to create, such as a large class instance, so it should not be built when a provider exists; - **per instance**, such as a `Map` each component should own; - **side-effecting** on creation, which should not happen needlessly. | Call | Provider exists | No provider | |---|---|---| | `inject('k')` | provided value | `undefined` + dev warning | | `inject('k', 'md')` | provided value | `'md'`, no warning | | `inject('k', null)` | provided value | `null`, no warning | | `inject('k', fn)` | provided value | `fn` itself | | `inject('k', fn, true)` | provided value | `fn()` result | ## Required or optional? Deciding whether to give a default is a design choice: - **Leave it off** when a missing provider is a programming error, such as a `FormField` used outside any `Form`. The warning makes the mistake visible in development. For a stronger signal, check the result and throw a clear error of your own. - **Give a default** when the component is meant to work standalone, such as a button that uses a provided size if there is one and `'md'` otherwise. - **Use a factory** when the fallback is costly or must be unique per component. ## A worked choice Consider a `Button` that can sit inside a `ButtonGroup`: - The group provides `size`, so buttons in it match. - A lone button must still work, so its injection has a plain default: `inject(sizeKey, 'md')`. - The group also provides a `register` function for keyboard navigation; a lone button has nothing to register with, so it uses `inject(groupKey, null)` and skips registration when the result is `null`. One component, two injections, two different fallback policies, each chosen for what a missing provider means. ## Keys The same rules apply to string and Symbol keys. The Vue docs recommend exported Symbol keys in larger apps and in component libraries, because two unrelated providers using the string `'size'` would silently shadow each other, while two `Symbol()` values never collide. ## Related APIs - `hasInjectionContext()` (Vue 3.3+) returns whether `inject()` can be called here without the wrong-place warning; libraries use it for helpers that may run inside or outside setup. - `app.runWithContext(fn)` (Vue 3.3+) runs `fn` with the app as the injection context, so `inject()` inside it can read app-level provides outside any component.