createContext
The createContext factory function is at the heart of all functionality in Vuetify0. It is a small wrapper around the Vue 3 provide↗ and inject↗ APIs, allowing you to create a context that can be shared across components.
Usage
import { shallowRef } from 'vue'
import { createContext } from '@vuetify/v0'
import type { ShallowRef } from 'vue'
interface MyContext {
isDisabled: ShallowRef<boolean>
isSelected?: ShallowRef<boolean>
type: 'primary' | 'secondary' | 'tertiary'
}
const [useContext, provideContext] = createContext<MyContext>('namespace')
provideContext({
isDisabled: shallowRef(false) ,
isSelected: shallowRef(true),
type: 'primary',
})
export { useContext }Architecture
createContext is the foundation for all dependency injection in Vuetify0:
Examples
Notification System
This example demonstrates the provider/consumer pattern using createContext. The context acts as a contract between components that produce state and components that consume it.
File breakdown:
| File | Role |
|---|---|
context.ts | Defines the NotificationContext interface and creates the typed [useNotifications, provideNotifications] tuple |
NotificationProvider.vue | Implements the context—creates reactive state and methods, then calls provideNotifications() |
NotificationConsumer.vue | Consumes the context via useNotifications() to display and interact with notifications |
notifications.vue | Entry point that composes Provider around Consumer |
Key patterns:
Provider components are invisible wrappers that render only
<slot />Consumers import only from
context.ts, never from the ProvidershallowReactivefor arrays that mutate in place
Click the buttons to add notifications. Click a notification to dismiss it.
Functions
useContext
(key: ContextKey<Z>, defaultValue?: Z | undefined) => ZInjects a context provided by an ancestor component.
provideContext
(key: ContextKey<Z>, context: Z, app?: App<any> | undefined) => ZProvides a context to all descendant components.
createContext
(keyOrOptions?: ContextKey<Z> | CreateContextOptions | undefined, defaultValue?: Z | undefined) => readonly [() => Z, (context: Z, app?: App) => Z] | readonly [(key: string, defaultValue?: Z) => Z, (key: string, context: Z, app?: App) => Z]