createTrinity
Generates a typed [useX, provideX, defaultX] tuple for Vue’s provide/inject dependency injection pattern.
Usage
The trinity pattern is the marrying of provide and inject with a context object. It provides a clean and type safe way to create a sharable singleton state.
import { ref } from 'vue'
import { createContext, createTrinity } from '@vuetify/v0'
import type { Ref } from 'vue'
interface User {
id: string
name: string
}
interface UserContext {
user: Ref<User>
update: (user: User) => void
}
function createUserContext() {
const [useContext, provideContext] = createContext<UserContext>('user')
const user = ref<User>({ id: '123', name: 'John Doe' })
function update(record: User) {
user.value = record
}
const context: UserContext = {
user,
update,
}
return createTrinity<UserContext>(useContext, provideContext, context)
}
export const [useUser, provideUser, context] = createUserContext()Architecture
createTrinity builds on createContext to provide a standardized 3-tuple pattern:
Plugin Trinity
When building a Vue plugin, use createPluginContext instead of wiring createContext + createTrinity manually. It generates the same trinity tuple from a factory function with far less boilerplate:
// Manual (createTrinity) — needed for non-plugin state
export const [useUser, provideUser, userContext] = createUserContext()
// Plugin (createPluginContext) — preferred for app.use() plugins
export const [createThemeContext, createThemePlugin, useTheme] =
createPluginContext('v0:theme', options => createTheme(options))createTrinity is the right tool when you want a shared singleton without a Vue plugin — component-scoped contexts, library utilities, or any state that doesn’t need app.use() lifecycle hooks.
Examples
Quick notifications
useToasts
Consumer
provideToasts
Provider
toastsContext
Default context
FAQ
createContext gives you the [use, provide] pair; createTrinity returns a 3-tuple that also includes a default context instance. That third member lets provide be called with no arguments and fall back to the default automatically.
Use createTrinity for a shared singleton that doesn’t need app.use() lifecycle — component-scoped contexts or library utilities. Use createPluginContext for plugin-backed state like theme, locale, or storage; it generates the same tuple plus install hooks.
Yes. Because the trinity bundles a default context as its third member, calling provideX() with no arguments provides that fallback — the provider wrapper handles it automatically.