createTrinity

The createTrinity factory function is a type-safe utility for generating a 3-item tuple—called a trinity—which contains a context consumer, a provider, and the underlying context object.

Copy Markdown

Advanced100% coverageMar 2, 2026

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:

Examples

Toast Notification System

A toast notification system split into four files demonstrating real-world trinity usage:

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

Quick notifications

0 active notifications

No notifications. Click a button above to fire one.

useToasts

Consumer

provideToasts

Provider

toastsContext

Default context

API Reference

The following API details are for the createTrinity composable.

Functions

createTrinity

(useContext: () => Z, provideContext: (_context?: Z, app?: App) => Z, context: Z) => ContextTrinity<Z>

Creates a new trinity for a context composable and its provider.