Vuetify0 无头组件库 - Vue 3 组合式函数与无样式UI构建块

vuetify0 by vuetifyjs/0

136 周安装量

90 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/vuetifyjs/0 --skill vuetify0

UI组件库 Vue 前端架构

🇨🇳中文介绍

Vuetify0 - 无头组合式函数与组件

通过专注于逻辑的无样式构建块，为设计系统改造 Vue 3 应用程序。

快速开始

pnpm install @vuetify/v0

无需全局插件。仅导入所需内容：

import { createSelection } from '@vuetify/v0/composables'
import { Tabs } from '@vuetify/v0/components'

核心决策树

在编写自定义逻辑之前，请检查 v0 是否已提供：

需求	使用	指南
单项选择	`createSingle`	单项选择模式
多项选择	`createSelection`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

UI组件模式实战指南：构建可复用React组件库与设计系统

10,700 周安装

Vue Pinia单元测试指南：组件、组合函数与状态管理测试最佳实践

641 周安装

json-render生成式UI框架：AI驱动、多平台JSON渲染，安全构建动态界面

511 周安装

完整 API 参考：参见 REFERENCE.md

所有组件均为无头（无样式）并遵循 WAI-ARIA 模式：

<script setup>
import { Tabs } from '@vuetify/v0/components'
</script>

<template>
  <Tabs.Root v-model="active">
    <Tabs.List>
      <Tabs.Item value="overview">概述</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="overview">内容</Tabs.Panel>
  </Tabs.Root>
</template>

可用组件：Dialog, Tabs, ExpansionPanel, Checkbox, Radio, Popover, Pagination

组件示例：参见 component-examples.md

// 单项选择（标签页、主题选择器）
const single = createSingle({ mandatory: 'force' })

// 多项选择（标签、过滤器）
const selection = createSelection({ multiple: true })

// 带“全选”的分组（数据表格）  
const group = createGroup()

// 类型安全的 provide/inject
const [useTheme, provideTheme] = createContext<Theme>('Theme')

const form = createForm()
form.register({ id: 'email', rules: [required, email] })

不要重复造轮子：

❌ 自定义选择逻辑 → 使用 createSelection ❌ 手动 provide/inject → 使用 createContext ❌ SSR 检查 → 使用 IN_BROWSER 常量

详细反模式：参见 anti-patterns.md

生成通用模式：

python scripts/scaffold_pattern.py --type selection --output ./composables

检查反模式：

python scripts/check_patterns.py ./src

Vuetify MCP 用于结构化 API 访问：

claude mcp add vuetify-mcp https://mcp.vuetifyjs.com/mcp

详细示例 : references/component-examples.md
高级模式 : references/advanced-patterns.md
迁移指南 : references/migration-guide.md
完整 API : references/REFERENCE.md
在线文档 : https://0.vuetifyjs.com

🇺🇸English

Vuetify0 - Headless Composables & Components

Transform Vue 3 apps with unstyled, logic-focused building blocks for design systems.

Quick Start

pnpm install @vuetify/v0

No global plugin required. Import only what you need:

import { createSelection } from '@vuetify/v0/composables'
import { Tabs } from '@vuetify/v0/components'

Core Decision Tree

Before writing custom logic , check if v0 already provides it:

Need	Use	Guide
Single item selection	`createSingle`	Single selection patterns
Multi-item selection	`createSelection`	Multi selection patterns
Selection with "select all"	`createGroup`	Group patterns
Step wizard / carousel	`createStep`	Stepper patterns
Form validation	`createForm`	Form patterns
Shared state (provide/inject)	`createContext`	Context patterns
Browser utilities	See utilities	Browser & DOM patterns

Full API reference : See REFERENCE.md

Component Architecture

All components are headless (unstyled) and follow WAI-ARIA patterns:

<script setup>
import { Tabs } from '@vuetify/v0/components'
</script>

<template>
  <Tabs.Root v-model="active">
    <Tabs.List>
      <Tabs.Item value="overview">Overview</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="overview">Content</Tabs.Panel>
  </Tabs.Root>
</template>

Available components : Dialog, Tabs, ExpansionPanel, Checkbox, Radio, Popover, Pagination

Component examples : See component-examples.md

Essential Patterns

Selection State

// Single selection (tabs, theme picker)
const single = createSingle({ mandatory: 'force' })

// Multi-selection (tags, filters)
const selection = createSelection({ multiple: true })

// Group with "select all" (data tables)  
const group = createGroup()

Context Sharing

// Type-safe provide/inject
const [useTheme, provideTheme] = createContext<Theme>('Theme')

Form Validation

const form = createForm()
form.register({ id: 'email', rules: [required, email] })

Anti-Patterns

Don't reinvent these wheels:

❌ Custom selection logic → Use createSelection ❌ Manual provide/inject → Use createContext ❌ SSR checks → Use IN_BROWSER constant

Detailed anti-patterns : See anti-patterns.md

Development Tools

Generate common patterns:

python scripts/scaffold_pattern.py --type selection --output ./composables

Check for anti-patterns:

python scripts/check_patterns.py ./src

Vuetify MCP for structured API access:

claude mcp add vuetify-mcp https://mcp.vuetifyjs.com/mcp

Resources

Detailed examples : references/component-examples.md
Advanced patterns : references/advanced-patterns.md
Migration guide : references/migration-guide.md
Full API : references/REFERENCE.md
Live docs : https://0.vuetifyjs.com

Weekly Installs

136

Repository

vuetifyjs/0

GitHub Stars

First Seen

Feb 4, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

opencode128

codex125

gemini-cli124

github-copilot122

amp120

kimi-cli120

TanStack Table 中文指南：React 无头表格库，实现排序过滤分页

486 周安装