Composables

Type-safe composables for headless UI. Components wrap these composables—you can use either approach.

Minimal Reactivity

Vuetify0 composables use the absolute minimum reactivity required to fulfill their responsibilities. This deliberate constraint keeps bundle sizes small, maximizes performance, and gives you full control over what triggers updates.

What’s Reactive

The reactive Option

For direct Vue reactivity on the collection and tickets themselves, pass reactive: true to the registry:

<script setup lang="ts">
  import { createRegistry } from '@vuetify/v0'

  const registry = createRegistry({ reactive: true })

  const input = defineModel({ default: '' })

  function onAdd () {
    if (!input.value.trim()) return
    registry.register({ value: input.value.trim() })
    input.value = ''
  }
</script>

<template>
  <div class="flex gap-2 mb-3">
    <input
      v-model="input"
      class="border border-divider rounded px-2 py-1 text-sm bg-surface text-on-surface flex-1"
      placeholder="Add item..."
      @keydown.enter="onAdd"
    />
    <button class="px-3 py-1 text-sm rounded bg-primary text-on-primary" @click="onAdd">Add</button>
  </div>

  <ul class="space-y-1">
    <li
      v-for="ticket in registry.values()"
      :key="ticket.id"
      class="flex items-center justify-between text-sm px-2 py-1 rounded border border-divider"
    >
      {{ ticket.value }}
      <button class="text-xs opacity-50 hover:opacity-100" @click="registry.unregister(ticket.id)">✕</button>
    </li>
  </ul>

  <p class="mt-2 text-xs opacity-50">{{ registry.size }} item{{ registry.size === 1 ? '' : 's' }}</p>
</template>

Unlike events (which fire callbacks) or useProxyRegistry (which wraps with computed refs), reactive: true makes the underlying Map and each ticket shallowReactive. Use it when you need Vue’s dependency tracking at the ticket level.

useProxyModel for v-model Binding

When you need to sync a selection context with a v-model ref, use useProxyModel:

<script setup lang="ts">
  import { createSelection, useProxyModel } from '@vuetify/v0'
  import { toRef } from 'vue'

  const model = defineModel({ default: 'blue' })

  const colors = [
    { id: 'red', value: 'red', hex: '#ef4444' },
    { id: 'blue', value: 'blue', hex: '#3b82f6' },
    { id: 'green', value: 'green', hex: '#22c55e' },
  ]

  const selection = createSelection({ events: true })
  selection.onboard(colors)

  useProxyModel(selection, model)

  const active = toRef(() => colors.find(c => c.value === model.value))
</script>

<template>
  <div class="flex gap-2">
    <button
      v-for="ticket in selection.values()"
      :key="ticket.id"
      class="size-8 rounded-full border-2 transition-all"
      :class="ticket.isSelected.value ? 'border-on-surface scale-110' : 'border-transparent'"
      :style="{ backgroundColor: colors.find(c => c.id === ticket.id)?.hex }"
      @click="ticket.select()"
    />
  </div>

  <p class="mt-2 text-sm">Selected: {{ active?.id ?? '—' }}</p>
</template>

Clicking a swatch calls ticket.select(), which updates model. Setting model.value = 'red' drives the selection back. Both directions stay in sync automatically.

useProxyRegistry for Full Reactivity

When you need automatic template updates for registry data, wrap it with useProxyRegistry:

import { createRegistry, useProxyRegistry } from '@vuetify/v0'

const registry = createRegistry()

// Non-reactive: template won't update when items change
const items = registry.values()

// Reactive: changes trigger template updates automatically
const proxy = useProxyRegistry(registry)
// proxy.values is a computed ref that updates on any mutation

This pattern lets you choose reactivity granularity—pay for what you use

Events as Opt-In Reactivity

Registries emit events when operations occur. Use events to build reactive behavior only where needed:

import { createRegistry } from '@vuetify/v0'

const registry = createRegistry({ events: true })

// Listen for changes
registry.on('register:ticket', ticket => {
  console.log('Added:', ticket.id)
})

registry.on('unregister:ticket', ticket => {
  console.log('Removed:', ticket.id)
})

Available events:

• register:ticket — Item added

• unregister:ticket — Item removed

• update:ticket — Item modified via upsert()

• clear:registry — All items removed

• reindex:registry — Indices recalculated

Naming Conventions

Composable names signal how they’re used:

create* — Factory Functions

Factory functions construct a new instance of stateful logic. They return an object you can provide, pass around, or destructure.

use* — Composables

Composables consume existing context or wrap browser APIs. They’re called inside setup() and return reactive state.

Foundation

Core factories that provide the foundation for all other composables.

Registration

Collection management and data structure primitives.

Selection

State management for single and multi-selection patterns.

Forms

Form state management and model binding utilities.

Reactivity

Reactive proxy utilities for bridging state.

System

Browser API wrappers with automatic lifecycle cleanup.

Plugins

Application-level features installable via Vue plugins.

Data

Composables for filtering, sorting, paginating, and virtualizing collections.

Semantic

Composables for presentational and semantic components.

Transformers

Value transformation utilities.