provide() and inject() for Dependency Injection
Provide values at an ancestor component and inject them deep in the tree, avoiding prop drilling without a full state management library.
The Prop Drilling Problem
Sometimes data lives in a high-up component and needs to reach a deep descendant. Passing it through every intermediate component (prop drilling) is tedious and brittle.
provide() — Declaring a Value
An ancestor calls provide(key, value) in setup(). The value becomes available to all descendants.
<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
const theme = ref('dark');
provide('theme', theme);
</script>All lessons in this course
- provide() and inject() for Dependency Injection
- Async Components and Suspense
- Custom Directives
- Plugin System: app.use()