vuetify0

Vuetify0

ヘッドレスな Vue 3 コンポーネントとコンポーザブル。振る舞いと ARIA のみを提供します。

48 個のコンポーネント、74 個のコンポーザブル、27 個のユーティリティ。

インストール

pnpm install @vuetify/v0

import { createSelection, useBreakpoints } from '@vuetify/v0'
import { Tabs, Dialog } from '@vuetify/v0/components'

このリポジトリでは、内部モジュールを #v0/（#v0/composables、#v0/utilities、#v0/constants/globals）からインポートしてください。公開されているインポート先は @vuetify/v0、@vuetify/v0/components、@vuetify/v0/utilities、@vuetify/v0/constants です。

ほとんどの use* コンポーザブルはプラグインなしで実行でき、デフォルト値にフォールバックします。useDate は例外です。アダプターとともに createDatePlugin をインストールしないと、呼び出し時にエラーが発生します。アプリ全体でテーマ、ロケール、ストレージ、ブレークポイントを使用する場合は、createThemePlugin、createLocalePlugin、createStoragePlugin、または createBreakpointsPlugin をインストールしてください。

選択機能とボタンです。どちらにもプラグインは必要ありません。

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

  const filters = createSelection({ multiple: true })

  filters.register({ id: 'open' })
</script>

<template>
  <Button.Root @click="filters.toggle('open')">
    {{ filters.selectedIds.has('open') ? 'Open' : 'Closed' }}
  </Button.Root>
</template>

判断表

最初の列に該当する項目を確認してください。該当する行があれば、その API を使用します。ここに挙げたのは一般的なケースです。その他のコンポーネント、コンポーザブル、ユーティリティは、このスキルの最後に記載しています。

問題	使用するもの	カテゴリ
ネイティブな <button>（クリック、送信、切り替え）	Button	アクション
オーバーレイ、ダイアログ、モーダル	Dialog	開示
ポップオーバーまたはアンカー付きオーバーレイ	Popover	開示
インラインのステータス／ライブリージョンメッセージ	Alert	セマンティック
単一選択の状態（タブ、テーマピッカー）	createSingle	選択
複数選択の状態（フィルター、タグピッカー）	createSelection	選択
3 状態の一括選択	createGroup	選択
ツリー／ネストされた選択（ツリービュー、メニュー）	createNested	選択
ウィザード／カルーセルのステップ追跡	createStep	選択
ID ベースの値ストア（サブコンポーネント間で共有）	createModel	選択
非同期バリデーションと変更状態の追跡を伴うフォーム	createForm + createValidation	フォーム
スライダー／範囲／ノブの状態	createSlider	フォーム
オートコンプリート／コンボボックス	createCombobox	フォーム
スピンボタンの数値入力	createNumberField / createNumeric	フォーム
ワンタイムパスワード／確認コードの値	createOtp	フォーム
ページネーション付きまたは仮想化されたリスト	createPagination, createVirtual	データ
並べ替え／フィルタリング可能なテーブル	DataTable / createDataTable, createFilter	データ
編集可能／セル結合可能なデータグリッド	DataGrid / createDataGrid	データ
ルートから導出されるパンくずリスト	createBreadcrumbs	セマンティック
オーバーフロー／レスポンシブメニュー（あふれた項目を非表示にする）	createOverflow	セマンティック
型安全な provide/inject	createContext	基盤
ID → 値のリアクティブなレジストリ	createRegistry	登録
自動的に閉じるキュー（スナックバー、トースト）	createQueue	登録
元に戻す／やり直す履歴	createTimeline	登録
デザイントークンのグラフ（テーマ、間隔のスケール）	createTokens	登録
ポップオーバー、ツールチップ、メニューの位置	usePopover	システム
enter／leave アニメーションのオーケストレーション	usePresence	システム
フォーカスの閉じ込め（ネイティブではないダイアログ、ドロワー）	useFocusTrap	システム
roving tabindex（リスト、メニューバー）	useRovingFocus	システム
仮想フォーカス（コンボボックスのリストボックス）	useVirtualFocus	システム
外側のクリック／キーボードショートカット／イベントリスナー	useClickOutside, useHotkey, useEventListener	システム
リサイズ、交差、または変更の監視	useResizeObserver, useIntersectionObserver, useMutationObserver	システム
rAF ループ、または一時停止／再開可能な setTimeout	useRaf, useTimer	システム
レスポンシブブレークポイント	useBreakpoints, useMediaQuery	プラグイン
ローカライズされた文字列と日付／数値の書式設定	useLocale, useDate	プラグイン
テーマ（ライト／ダーク／カスタムパレット）	useTheme	プラグイン
RTL 方向の認識	useRtl	プラグイン
オーバーレイ用の z-index スタッキング	useStack	プラグイン
通知／スナックバーキューのプラグイン	useNotifications	プラグイン
機能フラグ／権限チェック	useFeatures, usePermissions	プラグイン
永続化された状態（localStorage / sessionStorage）	useStorage	プラグイン
アダプターを使用した構造化ログ	useLogger	プラグイン
SSR に安全なマウント検出	useHydration	プラグイン

ルール

ユーティリティ

ヘルパーを作成する前に、これらを確認してください。リポジトリ内：#v0/utilities。公開版：@vuetify/v0/utilities。

• 型ガード：isFunction、isString、isNumber、isBoolean、isObject、isArray、isNull、isUndefined、isNullOrUndefined、isPrimitive、isSymbol、isNaN、isElement
• mergeDeep、clamp、range、useId

ブラウザーのチェック

IN_BROWSER、SUPPORTS_TOUCH、SUPPORTS_MATCH_MEDIA、SUPPORTS_OBSERVER、SUPPORTS_INTERSECTION_OBSERVER、SUPPORTS_MUTATION_OBSERVER。

リポジトリ内：#v0/constants/globals。公開版：@vuetify/v0/constants。typeof window の代わりに、これらを使用してください。

リアクティビティ

• プリミティブには shallowRef
• オブジェクトと配列には ref
• 派生値には toRef
• computed は負荷の高い処理をキャッシュする場合にのみ使用

複合コンポーネント

ルートが状態を所有します。子コンポーネントは名前付きのサブコンポーネントで、createContext を通じて状態を読み取ります。

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

  const active = shallowRef('overview')
</script>

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

利用可能なコンポーネント：

• プリミティブ： AspectRatio（安定版）、Atom（安定版）、Portal、Presence
• プロバイダー： Group（安定版）、Locale、Scrim、Selection（安定版）、Single（安定版）、Step（安定版）、Theme（安定版）
• アクション： Button、Toggle（安定版）
• フォーム： Checkbox（安定版）、Combobox、Form、Input、NumberField、Otp、Radio（安定版）、Rating、Select、Slider、Switch（安定版）
• 開閉： AlertDialog、Collapsible（安定版）、Dialog、ExpansionPanel、Menu、Popover、Tabs（安定版）、Tooltip、Tour、Treeview
• セマンティック： Alert、Avatar、Breadcrumbs、Carousel、Image、Overflow、Pagination、Progress、Snackbar、Splitter
• データ： DataGrid、DataTable、Kanban、Virtualizer

予定（まだエクスポートされていません — インポートしないでください）：

• DatePicker、DateRangePicker、TimePicker

複合コンポーネントの例については、references/component-examples.md をご覧ください。

Vuetify MCP

Vuetify MCP サーバーが接続されている場合は、ガイドまたはリリースノートに次のツールを使用してください。

• vuetify-mcp:get_vuetify0_component_list
• vuetify-mcp:get_vuetify0_composable_list
• vuetify-mcp:get_vuetify0_component_guide
• vuetify-mcp:get_vuetify0_composable_guide
• vuetify-mcp:get_vuetify0_installation_guide

リソース

• ドキュメント：https://0.vuetifyjs.com
• API リファレンス：references/REFERENCE.md
• 選択パターン：references/selection-patterns.md
• アンチパターン：references/anti-patterns.md
• コンポーネントとコンポーザブル：references/layer-decisions.md
• 複合コンポーネントの作成：references/authoring-guide.md

API 全体

公開されているコンポーザブルとユーティリティです。(mature)、(stable)、(draft) のマークが付いています。マークのない項目はプレビューです。

コンポーザブル

基盤：

• createContext — Vue の provide/inject を基盤とする、型安全な依存性注入ファクトリーです。props の受け渡しを介さず、コンポーネントツリー間で状態を共有します。（安定版）
• createPlugin — 型付き依存性注入とライフサイクルフックを備えた Vue プラグインを作成するファクトリーです。（安定版）
• createTrinity — Vue の provide/inject による依存性注入パターン向けに、型付きの [useX, provideX, defaultX] タプルを生成します。（安定版）

登録：

• createQueue — タイムアウトによる自動削除と一時停止・再開をサポートする、時間ベースのコレクション向け FIFO キューです。
• createRegistry — 順序付きのキー付きコレクションの基盤です。アイテムは ID とインデックスで登録され、ID、インデックス、値から検索できます。（安定版）
• createTimeline — 設定可能なサイズ上限を備え、createRegistry を基盤とする、上限付きの元に戻す／やり直す履歴です。
• createTokens — 階層型コレクション、エイリアス解決、名前空間をサポートするデザイントークンレジストリです。

フォーム：

• createCombobox — カスタム実装向けの低レベルなコンボボックスコーディネーターです。ほとんどのユーザーには、代わりに Combobox コンポーネントの使用をおすすめします。
• createDatePicker — カレンダーグリッドのジオメトリ、単一日付モードと期間モード、プリセット期間、最小値／最大値の境界、無効な日付のルールに対応した、ヘッドレスな日付状態です。コンポーザブルを優先した設計で、@internationalized/date への依存はありません。（ドラフト）
• createForm — 複数の入力項目にまたがるバリデーションを調整します。submit()、reset()、集約された有効性の状態を提供します。
• createInput — バリデーション状態、ARIA ID の生成、自動フォーム登録に対応した、フォームフィールド共通のプリミティブです。
• createNumberField — ロケールに応じた書式設定、ステップへのスナップ、最小値／最大値／ステップの境界、テキスト入力の解析／確定に対応した数値です。
• createNumeric — 上限付きの値を扱う純粋な数値計算機能です。ステップへのスナップ、範囲内へのクランプ、浮動小数点精度の補正に対応します。
• createOtp — パターンに基づく入力制御と入力完了の検出に対応した、固定長のワンタイムパスワードまたは認証コードの値です。
• createRating — 離散的な項目を持つ、上限付きの数値です。サイズを指定すると、完全／半分／空の状態を持つ項目を反復処理できます。0.5 刻みの半ステップに対応します。
• createSlider — 単一つまみ、範囲指定、複数つまみのスライダーに対応した、スライダー状態のコンポーザブルです。値の計算、ステップへのスナップ、パーセンテージへの変換を処理します。
• createTimePicker — 時、分、秒のフィールド、12 時間制／24 時間制、午前／午後の処理、ステップへのスナップ、最小値／最大値の境界に対応した、セグメント化された時刻の値です。（ドラフト）
• createValidation — リアクティブなルール、非同期バリデーション、Standard Schema に対応した、入力項目ごとのバリデーションです。

選択：

• createGroup — チェックボックスツリー、グループ化されたトグル、項目を部分的に選択できるあらゆるパターンに対応した、3 状態（混合／不確定）選択機能です。（安定版）
• createModel — 双方向の選択バインディングに対応するため、ref をラップしたリアクティブな値ストアです。（安定版）
• createNested — createGroup を基盤とした階層ツリー管理機能です。親子関係、開閉状態、差し替え可能な走査戦略に対応します。（安定版）
• createSelection — コレクション内の項目の選択を管理するコンポーザブルです。インデックスの自動付与とライフサイクル管理に対応します。（安定版）
• createSingle — createSelection を拡張し、前の選択を自動的に解除して、単一項目の選択を強制します。（安定版）
• createStep — createSingle を拡張し、範囲内または循環型のナビゲーションに対応します。ウィザード、複数ステップのフォーム、オンボーディングフロー向けに設計されています。（安定版）

データ：

• createDataGrid — 列レイアウト、セル編集、行の並べ替え、行のスパンに対応した、ヘッドレスなデータグリッドです。
• createDataTable — v0 プリミティブを基盤とするコンポーザブルなデータテーブルです。並べ替え、フィルタリング、ページネーション、選択、展開を単一のパイプラインに統合します。
• createFilter — 検索クエリに基づいて項目の配列をフィルタリングするコンポーザブルです。プリミティブ値と、カスタマイズ可能なフィルタリングロジックを持つ複雑なオブジェクトの両方に対応します。
• createKanban — カード列を扱う 2 階層のボード状態です。列の並べ替え、列内の並べ替え、列をまたいだ transfer プリミティブに対応します。
• createPagination — ナビゲーションメソッドと、表示するページ項目の算出機能を備えた、ページネーション状態を管理する軽量なコンポーザブルです。
• createSortable — move、swap、reorder による変更に対応した、順序付きリストの状態です。
• createVirtual — 表示中の項目のみを描画し、大規模なリストを効率的に表示する仮想スクロールのコンポーザブルです。

セマンティック：

• createBreadcrumbs — createSingle を拡張し、パスの自動切り詰めに対応したパンくずナビゲーション用コンポーザブルです。
• createOverflow — 利用可能な幅に基づいてコンテナーに収まる項目数を算出します。ページネーション、パンくずなどの UI で、レスポンシブな切り詰めを行うために使用できます。
• createProgress — 1 つ以上のセグメントにわたる進捗を追跡するコンポーザブルです。パーセンテージの計算と、不確定状態の検出に対応します。

プラグイン：

• useBreakpoints — 名前付きブレークポイントを使用して、レスポンシブレイアウト構築のためのビューポートをリアクティブに検出します。（安定版）
• useDate — Temporal API を使用した日付操作と、ロケールに応じたフォーマットおよびアダプターのサポートを提供します。
• useFeatures — アプリケーション全体の機能フラグとバリエーションを管理します。
• useHydration — SSR のハイドレーションのタイミングを制御し、不一致を防いでクライアント側のレンダリングを最適化します。
• useLocale — メッセージ翻訳、数値フォーマット、ロケール切り替えに対応する i18n プラグインです。
• useLogger — 設定可能なレベル、フィルタリング、一般的なロギングライブラリ用の差し替え可能なアダプターを備えた、アプリケーションのロギング機能です。
• useNotifications — 重要度レベル、状態の変更、トーストのキューイング、自動非表示に対応した通知ライフサイクル管理です。
• usePermissions — アクション、対象、コンテキストを考慮した条件によるロールベースのアクセス制御です。
• useReducedMotion — リアクティブなフラグと、CSS のみで利用するための body データ属性を使って、ユーザーの prefers-reduced-motion 設定を尊重または上書きします。
• useRtl — リアクティブな状態とサブツリーのオーバーライドに対応した、右から左へのテキスト方向の管理です。
• useRules — Standard Schema のサポートとカスタムエイリアスを備えた、バリデーションルール管理です。
• useStack — 自動スタック順序と親子のネストをサポートする、オーバーレイの z-index コーディネーターです。
• useStorage — 自動シリアライズ、キャッシュ、SSR に安全な操作に対応したリアクティブストレージです。（安定版）
• useTheme — 複数のテーマ、CSS カスタムプロパティ、トークンエイリアスの解決に対応したテーマ管理です。（安定版）
• useTooltip — 領域内でツールチップの開閉遅延とスキップ遅延の既定値を共有し、近くのツールチップがすでに開いている場合は即座に開きます。
• useTour — ヘッドレスのガイドツアーシーケンサーです。ステップの収集、アクティベーターの登録、フォームによって制御されるナビゲーション、プログラムによる有効化・無効化、ステップごとの enter／leave／completed ハンドラーとイベントに対応します。createStep、createRegistry、createForm を基盤としています。

システム：

• useClickOutside — 指定した要素の外側でのクリックを検出し、自動的にクリーンアップするコンポーザブルです。
• useDelay — 開始、一時停止、再開、停止の操作と、保留中の遅延をリアクティブに確認できる機能を備え、開閉の遷移をスケジュールします。
• useDragDrop — ヘッドレスなドラッグ＆ドロップのプリミティブです。ドラッグ可能な要素とゾーンの2つのレジストリ、およびアクティブなドラッグ状態を管理します。
• useEventListener — コンポーネントのアンマウント時に自動的にクリーンアップする、DOM イベント処理用のコンポーザブルです。
• useFocusTrap — Tab と Shift+Tab のフォーカスをルート要素内に閉じ込め、有効化時にその要素内へフォーカスし、無効化時に以前フォーカスされていた要素へ戻します。
• useHotkey — プラットフォームに応じた修飾キーと自動クリーンアップに対応した、ホットキーの組み合わせやシーケンスを処理するコンポーザブルです。
• useImage — 画像の読み込み状態を、idle、loading、loaded、error の各状態を持つリアクティブなステートマシンとして追跡します。
• useIntersectionObserver — Intersection Observer API を使用して要素がビューポートに入るとき、またはビューポートから出るときを検出し、自動的にクリーンアップするコンポーザブルです。（安定版）
• useLazy — 初回の有効化までコンテンツのレンダリングを遅延し、必要に応じて無効化時にリセットするコンポーザブルです。
• useMediaQuery — CSS メディアクエリへの適合をリアクティブに判定し、自動的にクリーンアップするコンポーザブルです。
• useMutationObserver — Mutation Observer API を使用して DOM の変更を検出し、自動的にクリーンアップするコンポーザブルです。（安定版）
• usePopover — プラグイン可能な位置指定アダプターを備えた、ネイティブのポップオーバー API です。デフォルトでは CSS アンカーによる位置指定を使用します。インスタンスごと、または createPopoverPlugin を使ってアプリ全体で、FloatingUIPopoverAdapter（または任意の PopoverAdapter）に切り替えられます。
• usePresence — アニメーションに依存しないマウントライフサイクル管理です。
• useRaf — コールバックを次のアニメーションフレームまでスロットルし、キャンセル後にリクエストすることで重複を排除します。スコープの破棄時に自動的にクリーンアップされます。
• useResizeObserver — Resize Observer API を使用して要素のサイズ変更を検出し、自動的にクリーンアップするコンポーザブルです。（安定版）
• useRovingFocus — 複合ウィジェット向けのキーボードナビゲーションです。矢印キーで項目間のフォーカスを移動し、無効な項目はスキップします。
• useTimer — 一時停止・再開に対応し、残り時間を追跡するリアクティブなタイマーコンポーザブルです。
• useToggleScope — リアクティブな真偽値条件に基づいて Vue のエフェクトスコープを条件付きで管理し、自動的にクリーンアップするコンポーザブルです。
• useTypeahead — 入力された文字をリスト内の項目と前方一致で照合し、1秒間蓄積します。同じ文字が繰り返された場合は、該当項目を順に切り替えます。
• useVirtualFocus — DOM のフォーカスを単一のコントロール要素に保ちながら、項目間で視覚的なハイライトを移動するキーボードナビゲーション用のコンポーザブルです。

リアクティビティ：

• useProxyModel — 選択コンテキストと ref を双方向に同期するコンポーザブルです。選択状態とシームレスに連携する v-model を実現します。（安定版）
• useProxyRegistry — レジストリコレクションをラップするリアクティブなプロキシです。項目の登録時や登録解除時に ref を自動的に更新します。

変換関数：

• toArray — null や undefined を含む任意の値を配列に変換します。（安定版）
• toElement — ref、ゲッター、DOM 要素、Vue コンポーネントインスタンスを、単一の Element | undefined に解決します。（安定版）
• toHighlight — テキストを一致部分と不一致部分に分割し、検索語のハイライト表示用にプレーンな HighlightChunk[] を返します。
• toReactive — MaybeRef オブジェクトを、自動的な ref のアンラップと Map／Set に対応したリアクティブなプロキシに変換します。

ユーティリティ

• apca
• clamp — 値を最小値と最大値の間に収めます（安定版）
• findMatchRanges — 文字列内でクエリに一致する範囲を検索します。必要に応じて、両側でアクセント記号を無視します。
• foreground
• getActiveElement — 開いているシャドウルートをたどり、最も深い位置にあるフォーカス中の要素を返します。SSR では null を返します。
• hexToRgb
• isArray — 値が配列かどうかを確認します（成熟版）
• isBoolean — 値がブール値かどうかを確認します（成熟版）
• isElement — 値が DOM Element かどうかを確認します（成熟版）
• isFunction — 値が関数かどうかを確認します（成熟版）
• isNaN — 値が NaN（Not a Number）かどうかを確認します（成熟版）
• isNull — 値が null かどうかを確認します（成熟版）
• isNullOrUndefined — 値が null または undefined かどうかを確認します（成熟版）
• isNumber — 値が数値かどうかを確認します（成熟版）
• isObject — 値がプレーンオブジェクトかどうかを確認します（null と配列は除外）（成熟版）
• isPrimitive — 値がプリミティブ（文字列、数値、またはブール値）かどうかを確認します（安定版）
• isString — 値が文字列かどうかを確認します（成熟版）
• isSymbol — 値がシンボルかどうかを確認します（成熟版）
• isThenable — 値が thenable（.then メソッドを持つ任意のオブジェクト）かどうかを確認します。
• isUndefined — 値が undefined かどうかを確認します（成熟版）
• isV0Error — v0 がスローするエラーの型ガードです。
• mergeDeep — ソースオブジェクトをターゲットオブジェクトに深くマージし、新しいオブジェクトを返します（安定版）
• pxToNumber — CSS のピクセル長を数値に解析します。長さを解析できない場合は、呼び出し元が指定したフォールバック値を返します。
• range — 連続した数値の配列を作成します（成熟版）
• rgbToHex
• useId — コンポーネントのコンテキスト内では Vue の useId を使用して、一意の ID を生成します（安定版）
• V0Error — v0 の内部処理がスローする構造化エラーです。