Using the Docs

This guide helps you get the most out of v0 documentation. Whether you’re exploring headless components for the first time or diving deep into composable architecture, these features will accelerate your learning.

Key features:

• Ask AI — Context-aware assistant that knows every page

• Skill filtering — Show content matching your experience level

• Interactive examples — Live demos with editable code

• Keyboard-first — Navigate entirely without a mouse

Documentation Structure

The docs are organized into distinct sections, each serving a specific purpose:

Each component and composable page follows a consistent structure: overview, usage examples, anatomy, and API reference.

Page Header

Every page includes a header area (shown at the top of this page) with quick actions and metadata.

Actions:

Metadata (component and composable pages):

These metadata items are standalone components usable anywhere. This page’s actual metadata:

Skill Levels & Learning Tracks

Use the filter to show only pages matching your experience level:

Skill Levels

Every page is tagged with a skill level to help you find content appropriate for your experience:

Learning Tracks

The Guide overview defines three learning tracks for structured progression:

Track A: Fundamentals — Understanding the system

1. Core — Trinity, Context, and Registry patterns

2. Components — Headless primitives and slot props

3. Composables — Composables vs components

4. Plugins — Vue plugin integration

Track B: Features — Production-ready UIs

1. Theming — CSS variables and design tokens

2. Accessibility — ARIA patterns and keyboard navigation

3. Utilities — Helper functions and type guards

Track C: Integration — See v0 in production

1. Nuxt 3 — SSR, auto-imports, theme persistence

2. Building Docs — How this documentation site uses v0

New to v0? Start with Track A. Already building? Jump to Track B as needed.

Navigation

Table of Contents

The right sidebar (desktop only) shows an outline of the current page:

• Auto-generated from H2, H3, and H4 headings

• Scroll spy: Highlights your current section as you read

• Click any heading to jump directly to that section

Related Links

At the bottom of each page, you’ll find links to related content. These cross-references help you discover connected concepts and navigate between related components and composables.

Previous / Next

Footer navigation at the bottom of each page links to adjacent pages in the current section, allowing linear reading through the documentation.

Search

Opening Search

• Click the search button in the header, or try it here: Search the docs...Ctrl+K

• Press Ctrl+K (Windows/Linux) or Cmd+K (Mac)

Using Search

The search system uses fuzzy matching, so typos and partial words still find results:

• "creat contxt" finds createContext

• "dialg" finds Dialog

• "selec" finds Selection, createSelection

Results are grouped by category, with Guide pages prioritized. Maximum 20 results are shown per query.

Keyboard Navigation

Ask AI

The documentation includes a context-aware AI assistant that understands v0 concepts and has access to the current page’s content.

Opening Ask AI

• Click the floating input at the bottom of any page

• Press Ctrl+/ (Windows/Linux) or Cmd+/ (Mac)

On desktop, the chat opens as a right-side panel. On mobile, it opens as a full-screen modal.

What the AI Knows

The AI has access to the entire v0 documentation via llms-full.txt, but prioritizes the current page for more relevant answers:

This context makes answers specific and actionable. Asking “How do I open this programmatically?” on the Dialog page gives you Dialog-specific code.

ASKAI Callouts

Throughout the documentation, you’ll find clickable “Ask AI” boxes:

These are pre-written questions relevant to the current topic. Click one to instantly send it to Ask AI.

Chat Features

• Streaming: Responses appear in real-time as they’re generated
• Markdown: Responses include formatted code with syntax highlighting
• Diagrams: Mermaid diagrams render inline when relevant
• Copy: Copy the entire conversation to clipboard
• Bin: Save to Vuetify Bin for sharing
• Stop: Cancel generation mid-stream if needed

The AI can generate syntax-highlighted code blocks and Mermaid diagrams directly in responses. Ask for architecture diagrams, data flow visualizations, or working code examples.

Example Prompts

Click any suggestion to send it to Ask AI:

• Ask AI

  Show me how to use Dialog with v-model
• Ask AI

  What's the difference between createSelection and createGroup?
• Ask AI

  Explain the slot props for Step.Item

Or type your own question:

Interactive Examples

Most component and composable pages include live, interactive examples.

Live Previews

Examples render as functional components you can interact with directly:

• Click buttons, open dialogs, select items

• See real behavior without leaving the docs

• Examples use the same code shown below them

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

  const selected = shallowRef<string[]>([])
</script>

<template>
  <Group.Root v-model="selected">
    <div class="flex flex-col gap-2">
      <Group.Item
        v-for="item in ['apple', 'banana', 'cherry']"
        :key="item"
        v-slot="{ isSelected, toggle, attrs }"
        :value="item"
      >
        <button
          v-bind="attrs"
          class="px-3 py-1.5 border rounded text-left text-sm"
          :class="isSelected ? 'bg-surface-tint border-primary' : 'bg-surface border-divider'"
          @click="toggle"
        >
          {{ item }}
        </button>
      </Group.Item>
    </div>
  </Group.Root>

  <div class="mt-4">Selected: {{ selected.join(', ') }}</div>
</template>

Code Toggle

Click “Show code” to reveal the source code for any example:

• Syntax highlighted with proper Vue/TypeScript coloring

• Click “Hide code” to collapse

Actions

Hover over the code block to reveal action buttons:

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

  const count = shallowRef(0)
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

Code Groups

Some examples show multiple variants in tabbed code blocks:

• Click tabs to switch between versions

• Use ← / → arrow keys when focused

• Tab state is independent per code group

pnpm add @vuetify/v0

npm install @vuetify/v0

yarn add @vuetify/v0

bun add @vuetify/v0

Diagrams

Architecture and flow diagrams use Mermaid. Click any diagram to open an expanded view in a dialog.

Horizontal flow for pipelines and transformations:

Vertical flow for hierarchies and dependencies:

Subgraphs group related concepts (from useProxyModel):

API Reference

Every component and composable includes comprehensive API documentation.

Inline API

By default, API tables appear directly on the page in expandable sections:

• Props: Input properties with types, defaults, and descriptions

• Events: Emitted events with payload types

• Slots: Template slots with scope props

• Options: Configuration options (composables)

• Methods: Exposed functions (composables)

• Properties: Reactive properties (composables)

Click any item to expand its details, including code examples where available.

Dedicated API Pages

For focused reference, visit /api/{name}:

• All component variants shown together (e.g., Dialog.Root, Dialog.Content)

• Full details without page navigation

• Useful for side-by-side comparison

Toggle between views using “View standalone ↓” / “Show inline →” in the API section header.

API Hover

In code examples throughout the docs, component and composable names are interactive. Hover over any recognized name to see a quick reference popover:

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

  const current = shallowRef<string>()
</script>

<template>
  <Step.Root v-model="current" mandatory>
    <Step.Item value="step1">Step 1</Step.Item>
    <Step.Item value="step2">Step 2</Step.Item>
  </Step.Root>
</template>

import { useTheme } from '@vuetify/v0'

const theme = useTheme()

theme.isDark.value // boolean
theme.toggle() // switch themes

• Hover over Step.Root, Step.Item, or useTheme above to see the popover

• Shows description and key API members

• Click “View API →” to jump to the full reference

Vue Documentation Links

Vue built-in functions like ref, computed, onMounted, and watch are clickable in both code blocks and inline code. Click to open the official Vue documentation in a new tab.

import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

onMounted(() => {
  console.log('Component mounted')
})

Callouts

The documentation uses callout boxes to highlight important information:

Keyboard Shortcuts

Navigate the entire documentation without touching a mouse:

All keyboard shortcuts work with both Ctrl (Windows/Linux) and Cmd (Mac).

Settings

Click the settings button in the header to open the settings panel:

The settings panel provides personalization options that persist across sessions.

Theme

Choose your preferred color scheme:

Skill Level

Filter documentation pages by complexity. Selected levels appear in the navigation—pages outside your selection are hidden.

Code Examples

Toggle line wrapping for long lines in code blocks:

const veryLongVariableName = someFunction(argumentOne, argumentTwo, argumentThree, argumentFour, argumentFive)

API Reference

Display API details inline on component and composable pages, or show links to dedicated API pages:

Motion

Control animations: follow your OS preference, force reduce, or enable full motion.

Package Manager

Set your default for installation code examples:

Header Buttons

Toggle visibility of header controls to reduce clutter:

Navigation

Group sidebar navigation items into collapsible sections:

Accessibility

The documentation is built with accessibility in mind:

• Full keyboard navigation — Every interactive element is reachable via keyboard

• ARIA labels — Screen readers announce all controls correctly

• Skip link — “Skip to main content” link appears on focus

• Reduced motion — Animations respect prefers-reduced-motion

• Focus indicators — Clear visual focus states throughout

• Semantic HTML — Proper heading hierarchy and landmarks

Community & Contributing

Contribute

Found an error or want to improve the docs? Contributions are welcome:

• Each page links to its source on GitHub

• Submit pull requests for fixes or enhancements

• See the Contributing Guide for details