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