Nuxt UI v4

Vue 3 と Nuxt 4+ 向けコンポーネントライブラリで、Reka UI (ヘッドレス) + Tailwind CSS v4 + Tailwind Variants で構築されています。

現在の安定版: v4.4.0 (2026年1月)

使用するべき場合

• @nuxt/ui のインストール/設定
• UI コンポーネント (Button, Card, Table, Form など) の使用
• テーマのカスタマイズ (色、バリアント、CSS 変数)
• バリデーション付きフォームの構築
• オーバーレイ (Modal, Toast, CommandPalette) の使用
• コンポーザブル (useToast, useOverlay) の操作

Vue コンポーネントパターン用: vue スキルを使用 Nuxt ルーティング/サーバー用: nuxt スキルを使用

利用可能なガイダンス

ファイル	トピック
references/installation.md	Nuxt/Vue セットアップ、pnpm の注意点、UApp ラッパー、モジュールオプション、プレフィックス、ツリーシェイキング
references/theming.md	セマンティックカラー、CSS 変数、app.config.ts、Tailwind Variants
references/components.md	カテゴリ別コンポーネントインデックス (125+ コンポーネント)
components/*.md	コンポーネント別詳細 (button.md、modal.md など)
references/forms.md	フォームコンポーネント、バリデーション (Zod/Valibot)、useFormField
references/overlays.md	Toast、Modal、Slideover、Drawer、CommandPalette
references/composables.md	useToast、useOverlay、defineShortcuts、useScrollspy

ファイルの読み込み

現在のタスクに基づいて、これらの参照ファイルの読み込みを検討してください:

• references/installation.md - @nuxt/ui をインストール/設定する場合
• references/theming.md - テーマ、色、Tailwind Variants をカスタマイズする場合
• references/components.md - コンポーネントインデックスを閲覧したり、カテゴリ別にコンポーネントを検索する場合
• references/forms.md - バリデーション (Zod/Valibot) 付きフォームを構築する場合
• references/overlays.md - Toast、Modal、Slideover、Drawer、CommandPalette を使用する場合
• references/composables.md - useToast、useOverlay またはその他のコンポーザブルを使用する場合

すべてのファイルを一度に読み込まないでください。 現在のタスクに関連するものだけを読み込んでください。

主要な概念

概念	説明
UApp	Toast、Tooltip、オーバーレイに必要なラッパーコンポーネント
Tailwind Variants	スロット、バリアント、compoundVariants を備えた型安全なスタイリング
セマンティックカラー	primary、secondary、success、error、warning、info、neutral
Reka UI	ヘッドレスコンポーネントプリミティブ (アクセシビリティ組み込み)

ヘッドレスコンポーネントプリミティブ (API 詳細、アクセシビリティパターン、asChild) については、reka-ui スキルを参照してください。

クイックリファレンス

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';

<!-- app.vue - UApp ラッパーが必須 -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

リソース

• Nuxt UI ドキュメント
• コンポーネントリファレンス
• テーマカスタマイズ

---

トークン効率: メインスキル ~300 トークン、各サブファイル ~800-1200 トークン