nuxt-ui-v4

Nuxt UI v4 - 本番環境向けコンポーネントライブラリ

バージョン：Nuxt UI v4.6+ | Nuxt v4.0.0 | 125+ コンポーネント 最終確認日：2026-03-30

アクセシブルなコンポーネントを125個以上備え、Tailwind CSS v4、Reka UI のアクセシビリティ機能、優れた AI 統合を提供する、本番環境対応の包括的なコンポーネントライブラリです。Nuxt とプレーンな Vue アプリ（Vite、Inertia、SSR）で動作します。

MCP 統合：このプラグインには、コンポーネントの最新データを提供する公式 Nuxt UI MCP サーバーが含まれています。

---

使用する場合／使用しない場合

使用する場合：Nuxt UI コンポーネントを使って、Nuxt v4 のダッシュボード、AI チャットインターフェース、ランディングページ、フォーム、管理画面、料金ページ、ブログ、ドキュメントサイト、またはその他の UI を構築する場合

使用しない場合：React プロジェクト、Nuxt 3 以前、Tailwind CSS v3 のプロジェクト。Vue のみのプロジェクトは、Vite プラグイン経由でサポートされています。

---

クイックスタート

bunx nuxi init my-app && cd my-app
bun add @nuxt/ui tailwindcss

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

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

<template><UApp><NuxtPage /></UApp></template>

またはテンプレートを使用します：

npm create nuxt@latest -- -t ui             # Starter
npm create nuxt@latest -- -t ui/dashboard    # Dashboard
npm create nuxt@latest -- -t ui/chat         # AI Chat
npm create nuxt@latest -- -t ui/landing      # Landing page
npm create nuxt@latest -- -t ui/saas         # SaaS
npm create nuxt@latest -- -t ui/docs         # Documentation
npm create nuxt@latest -- -t ui/portfolio    # Portfolio
npm create nuxt@latest -- -t ui/changelog    # Changelog
npm create nuxt@latest -- -t ui/editor       # Rich text editor

使用できるコマンド：/nuxt-ui-v4:setup、/nuxt-ui:migrate、/nuxt-ui:theme、/nuxt-ui:component

安全なインストール

UI パッケージは CSS やコンポーネントツリーを変更するため、プロジェクトへの追加を許可する前に確認してください。サプライチェーンセキュリティのベストプラクティスに従ってください。

• インストール後のスクリプトをブロックする — npm config set ignore-scripts true（または Bun：デフォルトで無効）
• クールダウン期間を設ける — 新しいパッケージバージョンがコミュニティによって審査されるまで、7日間待ちます
• インストール前に監査する — socket package score npm <pkg> を実行するか、socket npm install <pkg> を使用してパッケージを確認します

Socket CLI 統合、クールダウンの設定、ロックファイルの検証、CI による適用など、セキュリティ設定の詳細については、dependency-upgrade スキルを読み込んでください。

---

コンポーネントのカテゴリ（合計125+）

ダッシュボード（10コンポーネント）- 新機能

管理画面向けの包括的なシステム：

• DashboardGroup - サイドバーの状態管理機能を備えた固定レイアウト用ラッパー
• DashboardSidebar - サイズ変更と折りたたみが可能なサイドバー
• DashboardPanel - ヘッダー／本文／フッターのスロットを備えたメインコンテンツパネル
• DashboardNavbar - 上部ナビゲーションバー
• DashboardToolbar - ナビゲーションバーの下に表示するセカンダリツールバー
• DashboardSearch - ダッシュボード検索用の CommandPalette
• DashboardSearchButton - 検索を開始するボタン
• DashboardSidebarCollapse - デスクトップ用の折りたたみボタン
• DashboardSidebarToggle - モバイル用の切り替えボタン
• DashboardResizeHandle - サイドバー／パネル用のサイズ変更ハンドル

<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <UNavigationMenu :items="menuItems" />
    </UDashboardSidebar>
    <UDashboardPanel>
      <template #header><UDashboardNavbar /></template>
      <template #body><NuxtPage /></template>
    </UDashboardPanel>
  </UDashboardGroup>
</template>

詳細：ダッシュボードのパターンについては、references/dashboard-components.md を読み込んでください。

---

チャット／AI（8コンポーネント）

AI SDK v5 を使用する AI チャットボット向けに設計されています。

• ChatMessage - アイコン、アバター、アクションを備えた単一のメッセージ
• ChatMessages - 自動スクロールとステータスインジケーターを備えたメッセージ一覧
• ChatPalette - オーバーレイ内のチャットインターフェース
• ChatPrompt - AI プロンプト向けに拡張された Textarea
• ChatPromptSubmit - ステータス処理機能を備えた送信ボタン
• ChatReasoning - AI の推論／思考プロセスを折りたたんで表示（v4.6 の新機能）
• ChatTool - AI ツール呼び出しのステータスを折りたたんで表示（v4.6 の新機能）
• ChatShimmer - ストリーミング中のテキストに使うシマーアニメーション（v4.6 の新機能）

<script setup lang="ts">
import { isReasoningUIPart, isTextUIPart, isToolUIPart, getToolName } from 'ai'
import { Chat } from '@ai-sdk/vue'
import { isReasoningStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'

const input = ref('')
const chat = new Chat({
  onError(error) { console.error(error) }
})

function onSubmit() {
  chat.sendMessage({ text: input.value })
  input.value = ''
}
</script>

<template>
  <UChatMessages :messages="chat.messages" :status="chat.status">
    <template #content="{ message }">
      <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
        <UChatReasoning v-if="isReasoningUIPart(part)" :text="part.text" :streaming="isReasoningStreaming(message, index, chat)" />
        <UChatTool v-else-if="isToolUIPart(part)" :text="getToolName(part)" :streaming="isToolStreaming(part)" />
        <template v-else-if="isTextUIPart(part)">
          <MDC v-if="message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" />
          <p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
        </template>
      </template>
    </template>
  </UChatMessages>
  <UChatPrompt v-model="input" @submit="onSubmit">
    <UChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
  </UChatPrompt>
</template>

詳細：AI SDK との完全な統合、ストリーミング、推論、ツール呼び出しについては、references/chat-components.md を読み込んでください。

---

エディター（6コンポーネント）- 新機能

TipTap を使ったリッチテキスト編集：

• Editor - Markdown／HTML／JSON に対応した TipTap ベースのエディター
• EditorToolbar - 固定、吹き出し、またはフローティング形式のツールバー
• EditorDragHandle - ブロックの並べ替えに使うドラッグハンドル
• EditorMentionMenu - @ メンションの候補
• EditorEmojiMenu - : 絵文字ピッカー
• EditorSuggestionMenu - / コマンドメニュー

<template>
  <UEditor v-model="content" :extensions="extensions">
    <template #toolbar>
      <UEditorToolbar />
    </template>
  </UEditor>
</template>

詳細：TipTap のセットアップ、拡張機能、ツールバーのカスタマイズについては、references/editor-components.md を読み込んでください。

---

ページレイアウト（16 コンポーネント） - NEW

ランディングページとコンテンツのレイアウト：

• Page - 左右の列を持つグリッドレイアウト
• PageHeader - レスポンシブなページヘッダー
• PageHero - タイトル、説明、CTA を含むヒーローセクション
• PageSection - コンテンツセクションのコンテナ
• PageGrid - レスポンシブなグリッドシステム
• PageColumns - マルチカラムレイアウト
• PageFeature - 機能紹介コンポーネント
• PageCTA - 行動喚起セクション
• PageCard - タイトル、説明、リンクを備えたスタイル設定済みカード
• PageList - 縦型リストレイアウト
• PageLogos - ロゴ紹介
• PageAnchors - アンカーリンクのリスト
• PageAside - 固定サイドバー
• PageBody - メインコンテンツ領域
• PageLinks - リンクのリスト

<template>
  <UPage>
    <UPageHero title="Welcome" description="Get started today" :links="heroLinks" />
    <UPageSection>
      <UPageGrid>
        <UPageFeature v-for="f in features" v-bind="f" />
      </UPageGrid>
    </UPageSection>
    <UPageCTA title="Ready?" :links="ctaLinks" />
  </UPage>
</template>

詳細：ランディングページのパターンについては、references/page-layout-components.md を読み込んでください。

---

コンテンツ（7 コンポーネント） - NEW

ドキュメントとブログのコンテンツ：

• BlogPost - 記事表示コンポーネント
• BlogPosts - ブログのグリッドレイアウト
• ChangelogVersion - バージョン項目の表示
• ChangelogVersions - 変更履歴のタイムライン
• ContentNavigation - ドキュメント用のアコーディオン形式のナビゲーション
• ContentSearch - ドキュメント検索用の CommandPalette
• ContentSearchButton - 検索を開くボタン
• ContentSurround - 前後のナビゲーション
• ContentToc - 固定目次

<template>
  <UBlogPosts>
    <UBlogPost v-for="post in posts" v-bind="post" />
  </UBlogPosts>
</template>

詳細：ブログとドキュメントのパターンについては、references/content-components.md を読み込んでください。

---

料金プラン（3 コンポーネント） - NEW

SaaS の料金ページ：

• PricingPlan - 個別プランのカード
• PricingPlans - レスポンシブなプランのグリッド
• PricingTable - 機能比較表

<template>
  <UPricingPlans>
    <UPricingPlan
      v-for="plan in plans"
      :title="plan.title"
      :price="plan.price"
      :features="plan.features"
    />
  </UPricingPlans>
</template>

詳細：料金ページのパターンについては、references/pricing-components.md を読み込んでください。

---

フォーム（22 コンポーネント）

Input、InputDate、InputTime、InputNumber、InputTags、InputMenu、Select、SelectMenu、Textarea、Checkbox、CheckboxGroup、RadioGroup、Switch、Slider、Calendar、ColorPicker、PinInput、Form、FormField、FileUpload、FieldGroup、AuthForm

<UForm :state="state" :schema="schema" @submit="onSubmit">
  <UFormField name="email" label="Email">
    <UInput v-model="state.email" type="email" />
  </UFormField>
  <UButton type="submit">Submit</UButton>
</UForm>

詳細：バリデーション、ネストされたフォーム、ファイルアップロードについては、references/form-components-reference.md を読み込んでください。

---

ナビゲーション（8 コンポーネント）

Tabs、Breadcrumb、Link、Pagination、CommandPalette、NavigationMenu、Stepper、Tree

<UTabs v-model="tab" :items="items" />
<UCommandPalette :groups="groups" placeholder="Search..." />
<UStepper v-model="step" :items="steps" />

詳細：パターンについては、references/navigation-components-reference.md を読み込んでください。

---

オーバーレイ（8 コンポーネント）

Modal、Drawer、Slideover、Dialog、Popover、DropdownMenu、ContextMenu、Tooltip

<UModal v-model="isOpen"><UCard>Content</UCard></UModal>
<UDrawer v-model="isOpen" side="right">...</UDrawer>

詳細：それぞれの使い分けについては、references/overlay-decision-guide.md を読み込んでください。

---

フィードバック（7 コンポーネント）

Alert、Toast、Progress、Skeleton、Empty、Error、Banner

<UAlert color="warning" title="Warning message" />
<UEmpty icon="i-heroicons-inbox" title="No items" />
<UBanner title="Important announcement" />

詳細：references/feedback-components-reference.md を読み込んでください。

---

レイアウト（6 コンポーネント）

Card、Container、Main、Header、Footer、FooterColumns、Separator

---

データ（2 コンポーネント）

Table（仮想化対応）、ScrollArea

---

一般（15 コンポーネント）

Button、FieldGroup、Avatar、AvatarGroup、Badge、Accordion、Carousel、Chip、Collapsible、Icon、Kbd、Marquee、Timeline、User、App

---

カラーモード（6 コンポーネント）

ColorModeAvatar、ColorModeButton、ColorModeImage、ColorModeSelect、ColorModeSwitch、LocaleSelect

---

コンポーザブル

コア：useToast、useOverlay、useFormField、useScrollShadow ユーティリティ：defineShortcuts、defineLocale、extendLocale、extractShortcuts

const { add } = useToast()
add({ title: 'Success', color: 'success' })

defineShortcuts({ 'meta_k': () => openSearch() })

AI ユーティリティ：@nuxt/ui/utils/ai の isReasoningStreaming、isToolStreaming、getTextFromMessage

---

よくあるエラー（上位 5 件）

1. UApp ラッパーがない → アプリを <UApp> でラップします 2. CSS のインポート順序 → まず @import "tailwindcss"、次に @import "@nuxt/ui" の順にします 3. tailwindcss パッケージがない → bun add @nuxt/ui tailwindcss（両方とも必要です） 4. モジュールが見つからない → nuxt.config.ts の modules に '@nuxt/ui' を追加します 5. useChat が見つからない → AI SDK v5 では useChat() コンポーザブルではなく、new Chat() クラスを使用します

全リスト：25 件以上のエラー解決策については、references/COMMON_ERRORS_DETAILED.md を読み込んでください。

---

参照資料を読み込むタイミング

ダッシュボード／管理画面：dashboard-components.md AI チャット：chat-components.md、ai-sdk-v5-integration.md チャットのサブコンポーネント：chat-reasoning.md、chat-tool.md、chat-shimmer.md リッチテキスト：editor-components.md ランディングページ：page-layout-components.md 料金／SaaS：pricing-components.md ブログ／ドキュメント：content-components.md 認証／ログイン：auth-form.md フォーム：form-components-reference.md、form-validation-patterns.md テーマ設定：semantic-color-system.md、component-theming-guide.md トラブルシューティング：COMMON_ERRORS_DETAILED.md

---

利用可能なコマンド

• /nuxt-ui-v4:setup - プロジェクトで Nuxt UI を初期化します
• /nuxt-ui:migrate - v2/v3 から v4 に移行します
• /nuxt-ui:theme - テーマ設定を生成します
• /nuxt-ui:component - Nuxt UI のパターンに沿ってコンポーネントのひな形を作成します

利用可能なエージェント

• nuxt-ui-component-selector - ユースケースに最適なコンポーネントを提案します
• nuxt-ui-migration-assistant - v2/v3 → v4 の移行を案内します
• nuxt-ui-troubleshooter - よくある問題を診断し、解決します

MCP 連携

このプラグインには、以下を提供する公式 Nuxt UI MCP サーバー（https://ui.nuxt.com/mcp）が含まれています：

• コンポーネントの一覧とメタデータ
• ドキュメントへのアクセス
• 移行ガイド
• テンプレートの検索