What does createTrinity add over createContext?

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.

Should I use createTrinity or createPluginContext?

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.

Can I provide the context without passing an argument?

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.

createTrinity

Generates a typed [useX, provideX, defaultX] tuple for Vue’s provide/inject dependency injection pattern.

Copy Markdown

StableAdvancedOct 13, 2026

Usage

The trinity pattern pairs provide/inject with one context object. The third member of the tuple is the shared default.

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

Toast Notification System

A toast notification system across four files that demonstrates the full trinity pattern end-to-end. toasts.ts contains the only call to createTrinity — it builds a shallowReactive toast array, push / dismiss / clear methods, and a 4-second auto-dismiss timer, then passes useContext and provideContext (wrapped from createContext) into createTrinity to produce the exported [useToasts, provideToasts, toastsContext] tuple. ToastProvider.vue calls provideToasts() with no arguments and renders only a slot — the trinity’s fallback context means the provider needs no props. ToastConsumer.vue destructures { toasts, push, dismiss, clear } from useToasts() and drives a type-styled stack with quick-fire presets, a custom message composer, and an active-count display. toast-system.vue composes the two components, completing the pattern.

The bottom “Trinity tuple breakdown” panel inside the consumer renders all three tuple members by name — useToasts, provideToasts, toastsContext — making the three roles concrete. Notice that ToastConsumer never imports from ToastProvider.vue; it only imports from toasts.ts.

Reach for createTrinity when you want a shared singleton without a Vue plugin — state that doesn’t need app.use() lifecycle hooks but still needs typed provide/inject. For plugin-backed state (theme, locale, storage), prefer createPluginContext, which generates the same tuple plus install hooks.

File	Role
`toasts.ts`	Context factory — creates the trinity tuple
`ToastProvider.vue`	Calls `provideToasts()` and renders a slot
`ToastConsumer.vue`	Calls `useToasts()` to inject and display toasts
`toast-system.vue`	Entry point — wraps Provider around Consumer

Key patterns:

createToastContext wraps both createContext and createTrinity — the factory builds the context object and returns the trinity in one step
provideToasts() called with no arguments provides the default context — the trinity’s provider wrapper handles the fallback automatically
ToastConsumer calls useToasts() to inject the context from the nearest provider
The entry point composes Provider and Consumer — the same pattern scales to any app