provide()
Supplies a value to all descendant components via dependency injection.
Syntax
provide<T>(key: InjectionKey<T> | string, value: T): voidParameters
| Name | Type | Required | Description |
|---|---|---|---|
key | InjectionKey<T> | string | No | Identifier used by descendants to inject the value. |
value | T | No | The value to make available down the tree. |
Returns
void — Nothing; registers the provided value.
Examples
<script setup lang="ts">
import { provide, ref, readonly, type InjectionKey } from 'vue';
export const ThemeKey = Symbol() as InjectionKey<{ dark: boolean }>;
const theme = ref({ dark: true });
provide(ThemeKey, readonly(theme.value));
</script>
Notes
provide must be called synchronously during setup. Provide reactive values
(refs/reactive) so descendants react to changes; wrap with readonly() to keep
mutation in the provider. Use a typed InjectionKey symbol for type safety and
to avoid name collisions.