Provide and Inject Patterns

Welcome back! In the previous lesson, you learned how to organize and reuse logic in Vue 3 using advanced composable patterns. You saw how composables help keep your codebase clean and maintainable by separating business logic from UI logic. Now, as you continue your journey toward production-ready Vue applications, it's time to explore another essential tool: dependency injection with the Composition API, using provide and inject.

Dependency injection is a pattern that allows you to share data or functions from a parent component with its descendants, no matter how deep the component tree goes. This is especially useful in larger applications, where passing props through many layers becomes hard to manage. In this lesson, you will learn how to use provide and inject to manage shared state, such as a theme setting, in a scalable and maintainable way. By the end of this lesson, you will be able to implement dependency injection in your own Vue projects, making your code more flexible and production-ready.

Let's start by understanding the core concepts behind provide and inject. In Vue's Composition API, provide allows a component to make data or functions available to all of its descendant components. These descendants can then use inject to access the provided values, without the need to pass them down as props through every intermediate component.

This pattern is called dependency injection. It is especially useful for sharing things like global settings, services, or state that many components need to access. One important thing to remember is that the data you provide can be reactive, so changes in the parent will automatically update in the children.

To avoid naming collisions and make your code safer, it is best practice to use a unique key for each provided value. In Vue, this is often done using a JavaScript Symbol. For example, you might see something like this:

export const themeKey = Symbol('theme');

This symbol is then used as the key for both provide and inject, ensuring that only components that know about the key can access the value.

Before we implement provide and inject, let's create the useTheme composable that will manage our theme state. This composable demonstrates how to structure reusable logic that works seamlessly with dependency injection.

import { ref } from 'vue';

// Using a Symbol as the injection key is a best practice to avoid collisions.
export const themeKey = Symbol('theme');

export function useTheme() {
  const theme = ref('light'); // 'light' or 'dark'

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

  return { theme, toggleTheme };
}

This composable does several important things:

1. Creates a reactive theme state - The theme ref starts with 'light' and can be toggled between 'light' and 'dark'
2. Provides a toggle function - The toggleTheme function switches the theme value
3. Exports a unique Symbol - The themeKey Symbol ensures safe injection without naming collisions
4. Returns the reactive state and functions - Both theme and toggleTheme are returned for use by components

The key insight here is that the Symbol is exported from the same file as the composable, creating a clear connection between the state management logic and the injection key.