Guide

Learn v0’s patterns and build headless UI systems. Start with Getting Started if you haven’t installed v0 yet, or see Using the Docs for navigation tips and AI assistance.

Prerequisites

Before diving into the guides, ensure you’re familiar with:

• Required: Vue 3 basics (ref, computed, provide/inject)

• Helpful: Composables pattern, TypeScript generics

What’s Different About v0

The v0 Mental Model:

• Components are delivery mechanisms, not behavior containers

• Logic lives in composables you can use independently

• Trinity pattern: [use, provide, context] - predictable, debuggable

• Registry/Context pattern: Parent-child coordination without prop drilling

Learning Paths

Track A: Fundamentals

For understanding the system architecture.

Track B: Features

For building production UIs.

Track C: Integration

See v0 patterns in production.

Migrating to Headless

If you have an existing styled component library and want to adopt v0’s headless approach:

Strategy

1. Keep your styled components - They become thin wrappers around v0 logic

2. Replace internal state - Swap custom selection/toggle logic for v0 composables

3. Expose v0’s API - Let consumers access the underlying composable if needed

Example: Styled Tabs Component

Before (custom state management):

<script setup lang="ts">
  import { shallowRef, computed } from 'vue'

  const tabs = ['Home', 'Profile', 'Settings']
  const activeIndex = shallowRef(0)

  function select(index: number) {
    activeIndex.value = index
  }

  function next() {
    activeIndex.value = (activeIndex.value + 1) % tabs.length
  }

  function prev() {
    activeIndex.value = (activeIndex.value - 1 + tabs.length) % tabs.length
  }

  const activeTab = computed(() => tabs[activeIndex.value])
</script>

<template>
  <div class="my-tabs">
    <button
      v-for="(tab, i) in tabs"
      :key="tab"
      :class="{ active: i === activeIndex }"
      @click="select(i)"
    >
      {{ tab }}
    </button>
    <div class="content">{{ activeTab }}</div>
  </div>
</template>

After (v0-powered):

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

  const tabs = createSingle({ mandatory: true })

  // Bulk register tabs - first is auto-selected due to mandatory
  tabs.onboard([
    { id: 'home', value: 'Home' },
    { id: 'profile', value: 'Profile' },
    { id: 'settings', value: 'Settings' },
  ])
</script>

<template>
  <div class="my-tabs">
    <button
      v-for="tab in tabs.items"
      :key="tab.id"
      :class="{ active: tab.isSelected }"
      @click="tab.select"
    >
      {{ tab.value }}
    </button>
    <div class="content">{{ tabs.selectedValue }}</div>
  </div>
</template>

What You Get

• mandatory auto-selects first registered item

• Navigation methods built-in: next(), prev(), first(), last()

• Computed properties: selectedId, selectedIndex, selectedValue

• Ticket methods: each item has isSelected, select(), toggle()

• Disabled support via { disabled: true } on any ticket

Benefits

• Less code to maintain - v0 handles edge cases

• Consistent patterns - All your components use the same selection primitives

• Incremental adoption - Migrate one component at a time

Quick Reference