Vue Provide and Inject Explained — Dependency Injection

In this tutorial, you will learn about Vue Provide and Inject Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue's provide and inject enable Dependency Injection for deeply nested component trees, allowing an ancestor to provide data that any descendant can inject without prop drilling.

What You'll Learn

• provide and inject basics
• Reactivity in provided values
• App-level provide
• Injection default values
• When to use provide/inject vs props

Why It Matters

Prop drilling through deeply nested components is tedious and creates coupling. provide/inject lets you pass data directly to the component that needs it, keeping intermediate components clean.

<template>
  <div>
    <p>Theme: {{ theme }}</p>
    <p>User: {{ user.name }}</p>
    <button @click="toggleTheme">Toggle Theme</button>
    <DeepNestedChild />
  </div>
</template>

<script setup>
import { provide, ref } from "vue";
import DeepNestedChild from "./DeepNestedChild.vue";

const theme = ref("light");
const user = ref({ id: 1, name: "Alice" });

function toggleTheme() {
  theme.value = theme.value === "light" ? "dark" : "light";
}

provide("theme", theme);
provide("user", user);
</script>

<!-- DeepNestedChild.vue -->
<template>
  <div>
    <h3>Deep Nested Child</h3>
    <p>Inherited theme: {{ theme }}</p>
    <p>Inherited user: {{ user.name }}</p>
  </div>
</template>

<script setup>
import { inject } from "vue";

const theme = inject("theme", "light");
const user = inject("user");
</script>

Expected output: The deep child component displays the inherited theme and user. Toggling theme in the parent updates the child reactively.