createContext

Overview

createContext() is a utility that helps create type-safe context providers and consumers in Vue components. It provides a way to share data between components without prop drilling, similar to React's Context API.

Anatomy

import { createContext } from '~/utils/createContext';

// Create a context with a provider component name
const [injectMyContext, provideMyContext]
    = createContext<MyContextType>('MyProvider');

// Or with multiple possible provider components
const [injectMyContext, provideMyContext]
    = createContext<MyContextType>(['ProviderA', 'ProviderB']);

// Optional: Specify a custom context name
const [injectMyContext, provideMyContext]
    = createContext<MyContextType>('MyProvider', 'CustomContextName');

API Reference

createContext()

Creates a context with type-safe provider and consumer functions.

injectContext()

Consumes the context value from a provider component. Returns the context value if found, otherwise returns the fallback value if provided.

Throws an error if the context is not found (component is not a child of the provider).

[error]: 'Injection "injectionKey" not found. Component must be used within "providerComponentName"'

provideContext()

Provides a context value to child components.

Example

<script lang="ts">
import { createContext } from '~/utils/createContext';

export type ThemeContext = {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

export const [injectThemeContext, provideThemeContext]
    = createContext<ThemeContext>("ThemeProvider");
</script>

<script setup lang="ts">
const theme = ref<'light' | 'dark'>('light');
const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light';
};

provideThemeContext({
    theme: theme.value,
    toggleTheme,
});
</script>

<script setup lang="ts">
import { injectThemeContext } from './ProviderComponent.vue';

const { theme, toggleTheme } = injectThemeContext();
</script>

Type Safety

The utility is fully type-safe:

• The context value type is preserved throughout the provider-consumer chain
• TypeScript will enforce correct usage of the context value
• Fallback values must match the context value type

Best Practices

1. Always provide a fallback value when the context might not be available
2. Use descriptive names for provider components to make error messages clear
3. Keep context values minimal and focused on a single concern
4. Consider using multiple contexts for different concerns rather than a single large context

Changelog