Why Vuetify0

Choosing a UI foundation is one of the most consequential decisions in a Vue project. This guide compares v0 with other popular options to help you decide.

Use the filter to show content matching your experience level:

Why v0

Vuetify0 comes from the creators of Vuetify↗—the most popular Vue component framework with 40K+ GitHub stars, 2M+ weekly downloads, and 10+ years of production use. This isn’t a side project or experiment.

What You Get

Composable-First Architecture

Most headless libraries give you components. v0 gives you composables that optionally have components. Use the logic without any rendering overhead:

import { createSelection } from '@vuetify/v0'

// Pure logic - no components needed
const selection = createSelection()

// Register items first
selection.register({ id: 'item-1', value: 'Item 1' })
selection.register({ id: 'item-2', value: 'Item 2' })

// Then select
selection.select('item-1')
selection.select('item-2')

console.log(selection.selected.value) // ['item-1', 'item-2']
console.log(selection.isSelected('item-1')) // true

Compare this to other libraries where you must wrap everything in components to access selection state.

The Trinity Pattern

v0’s Trinity pattern provides three layers that work together:

1. Context — Dependency injection via provide/inject
2. Composable — Reactive logic you can use anywhere
3. Component — Optional rendering layer with slot props

This means the same selection logic powers a chip group, a listbox, tabs, or your custom component—without any wrappers.

Quick Comparison

When to Choose Each

Choose Vuetify 3 when:

• You want Material Design↗ out of the box
• You need 80+ production-ready styled components
• You prefer convention over configuration
• You’re building a standard business application

Choose Vuetify0 when:

• Building a custom design system (not Material Design)
• You need composable logic without component wrappers
• You want full control over markup and styling
• You’re already using Vuetify and need headless pieces
• You value Vue-native patterns over React ports

Choose Reka UI when:

• You need 40+ headless components now
• You’re using Nuxt UI↗ as your foundation
• You’re comfortable with Radix-style APIs (Reka is the Vue port of Radix, formerly called Radix Vue)
• You want the shadcn-vue↗ ecosystem

Choose Ark UI when:

• Building for multiple frameworks (Vue + React + Solid)
• You prefer state machine predictability (Zag.js↗)
• You need components v0 doesn’t have yet (e.g., color picker, tree view)

Choose VueUse when:

• You need utility composables, not UI components
• Browser APIs, sensors, animations, state utilities
• VueUse complements v0—use them together

Feature Comparison

v0 Roadmap

v0 is actively growing. The initial release focuses on core abstractions—the patterns that power Vuetify’s most complex components:

If you need 40+ components today, consider Reka UI or Ark UI. If you’re building a design system and want the strongest foundation for selection, forms, and composition patterns, v0 is the right choice—and more components are coming.

Using v0 with Vuetify

v0 and Vuetify share the same DNA. You can use v0 composables inside a Vuetify application:

<script setup lang="ts">
  import { VBtn, VCard } from 'vuetify/components'
  import { createSelection } from '@vuetify/v0'

  const selection = createSelection({ multiple: true })

  const items = [
    { id: 1, title: 'Option A' },
    { id: 2, title: 'Option B' },
    { id: 3, title: 'Option C' },
  ]
</script>

<template>
  <VCard title="Select Options">
    <div class="d-flex ga-2 pa-4">
      <VBtn
        v-for="item in items"
        :key="item.id"
        :color="selection.isSelected(item.id) ? 'primary' : undefined"
        :variant="selection.isSelected(item.id) ? 'flat' : 'outlined'"
        @click="selection.toggle(item.id)"
      >
        {{ item.title }}
      </VBtn>
    </div>
  </VCard>
</template>

This lets you leverage v0’s selection patterns while keeping Vuetify’s styled components.

Summary

Still unsure? Start with the Getting Started guide and try v0’s selection patterns. If they click, you’re in the right place.