nuxt-ui

Nuxt UI

Reka UI + Tailwind CSS + Tailwind Variants を基盤とする Vue コンポーネントライブラリです。Nuxt、Vue（Vite）、Laravel（Vite + Inertia）、AdonisJS（Vite + Inertia）で動作します。

MCP サーバー

コンポーネント API の詳細（props、slots、events、ドキュメント全体、例）については、Nuxt UI MCP サーバーを使用してください。まだ設定していない場合は、追加してください。

Cursor — .cursor/mcp.json：

{ "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } }

Claude Code：

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

主な MCP ツール：

• search-components — 名前、カテゴリ、用途からコンポーネントを検索します（パラメーターなしの場合はすべて一覧表示）
• search-composables — 名前または説明からコンポーザブルを検索します（パラメーターなしの場合はすべて一覧表示）
• search-icons — Iconify アイコンを検索します（デフォルトは lucide）。i-{prefix}-{name} 形式の名前を返します
• get-component — 使用例を含むコンポーネントの完全なドキュメント
• get-component-metadata — props、slots、events（ドキュメントの内容を含まない軽量版）
• get-example — 実際のコード例

コンポーネントが何を受け付けるか、またはAPI の動作を知る必要がある場合は、MCP を使用してください。このスキルでは、どのコンポーネントをいつ使うか、および適切な構築方法を学びます。

基本ルール（常に適用）

1. アプリは必ず UApp でラップしてください — トースト、ツールチップ、プログラムによるオーバーレイに必要です。i18n 用の locale prop を受け付けます。
2. 必ずセマンティックカラーを使用してください — text-default、bg-elevated、border-muted などを使います。text-gray-500 のような Tailwind の生のパレットカラーは使用しないでください。
3. スロット名は生成されたテーマファイルで確認してください — Nuxt の場合は .nuxt/ui/<component>.ts、Vue の場合は node_modules/.nuxt-ui/ui/<component>.ts です。各コンポーネントのすべてのスロット、バリアント、デフォルトクラスを確認できます。
4. 上書きの優先順位（高い順）：ui prop / class prop → グローバル設定 → テーマのデフォルト値。
5. アイコンには i-{collection}-{name} 形式を使用します — デフォルトのコレクションは lucide です。アイコンを探すには MCP の search-icons ツールを使用するか、icones.js.org を参照してください。

このスキルの使い方

タスクに応じて、コードを書く前に関連するリファレンスファイルを読み込んでください。すべてを読み込む必要はありません。必要なものだけを読み込んでください。

リファレンスファイル

ガイドライン — デザイン上の判断と規約：

• design-system — セマンティックカラー、テーマ設定、ブランドのカスタマイズ、バリアント、ui prop
• component-selection — Modal と Slideover、Select と SelectMenu、Toast と Alert などの使い分けを示す判断表
• conventions — コーディングパターン、スロットの命名、items 配列、コンポーザブル、キーボードショートカット
• forms — フォームの検証、フィールドのレイアウト、エラー処理、Standard Schema

レイアウト — ページ全体の構成パターン：

• landing — ランディングページ、ブログ、変更履歴、料金ページ
• dashboard — サイドバーとパネルを備えた管理 UI
• docs — ナビゲーションと目次を備えたドキュメントサイト
• chat — Vercel AI SDK を使用した AI チャット
• editor — ツールバーを備えたリッチテキストエディター

レシピ — よくあるタスクの完全なパターン：

• data-tables — フィルター、ページネーション、並べ替え、選択機能を備えたテーブル
• auth — ログイン、サインアップ、パスワード再設定フォーム
• overlays — モーダル、スライドオーバー、ドロワー、コマンドパレット
• navigation — ヘッダー、サイドバー、パンくずリスト、タブ

クイックリファレンス：

• components — 適切なコンポーネント名を探すための、カテゴリ別コンポーネント一覧

ルーティング表

タスク	読み込むリファレンス
ランディングページを作成する	design-system, conventions, landing
ダッシュボード／管理 UI を作成する	conventions, component-selection, dashboard
設定ページを追加する	conventions, forms
ログイン／サインアップフォームを作成する	conventions, forms, auth
データをテーブルに表示する	conventions, component-selection, data-tables
テーマ／ブランドカラーをカスタマイズする	design-system
チャットインターフェースを追加する	conventions, chat
モーダル、スライドオーバー、またはドロワーを追加する	conventions, component-selection, overlays
サイトナビゲーションを構築する	conventions, component-selection, navigation
ドキュメントサイトを構築する	conventions, docs
Markdown をレンダリングする	component-selection, components, docs
リッチテキストエディターを追加する	conventions, editor
一般的な UI 作業	conventions, component-selection

インストール

Nuxt

pnpm add @nuxt/ui tailwindcss

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

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

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

Vue（Vite）

pnpm add @nuxt/ui tailwindcss

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

// src/main.ts
import './assets/css/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)
const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)
app.mount('#app')

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

<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

アイコン（v4.10 以降）は、コレクションがローカルにインストールされている場合（@iconify-json/lucide）、SSR／オフライン利用向けにビルドへバンドルされます。Vue では、ui({ icon: { clientBundle: { scan: true } } }) を使用してください。 デフォルトのテーマクラスを取り除き、独自のデザインシステムを適用するには、nuxt.config.ts で ui: { theme: { unstyled: true } }（v4.9 以降）を設定してください。

index.html のルート <div id="app"> に class="isolate" を追加してください。 Inertia の場合は、vite.config.ts で ui({ router: 'inertia' }) を使用してください。