Frontend Academy · Lesson

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.

provide() and inject() for Dependency Injection is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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>

inject() — Consuming a Value

Any descendant calls inject(key) to read it.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

Reactivity with ref/reactive

If you provide a ref or reactive object, descendants get a reactive value — updates propagate automatically.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

Symbol Keys to Avoid Collisions

String keys risk collision in large apps. Symbols guarantee uniqueness — define them in a shared file.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

TypeScript Support

Use InjectionKey<T> to type-safe both sides.

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

Default Values

If no ancestor provides the key, inject returns undefined unless you pass a default.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

Read-only Provides

To prevent descendants from mutating shared state, wrap with readonly().

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

App-Level Provide

Provide values at the application level so they're available everywhere — useful for plugins.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

Composable Wrapper

Wrap provide/inject in a composable for a cleaner consumer API.

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject vs Pinia

provide/inject: lightweight, no library, ideal for plugin-style values (theme, locale, current user). Pinia: full state management with DevTools, optimal for app-wide reactive state with complex updates.

Quick Check

What is the recommended way to avoid key collisions when using provide/inject across a large Vue app?

Recap: provide/inject

Ancestor provides, descendant injects — no prop drilling. Reactive values (ref/reactive) propagate reactively. Symbol keys + InjectionKey for type-safe, collision-free injection. Default value as second arg of inject. readonly() to prevent mutation. App-level provide for cross-app plugins. Lightweight alternative to Pinia for plugin-style values.

Frequently asked questions

Is the “provide() and inject() for Dependency Injection” lesson free?

Yes — the full text of “provide() and inject() for Dependency Injection” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “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. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “provide() and inject() for Dependency Injection” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

provide() and inject() for Dependency Injection
Async Components and Suspense
Custom Directives
Plugin System: app.use()

← Back to Frontend Academy