導入

Nuxt UIとは？

Reka UI、Tailwind CSS、Tailwind Variants上に構築された最新のVue UIコンポーネントライブラリで、125以上のプロダクション対応コンポーネントを備えた美しくアクセスしやすいアプリケーションを提供します。NuxtおよびプレーンなVueアプリケーション（Vite、Inertia、SSR）で動作します。

Tailwind CSSでVueプロジェクトを構築している場合、Nuxt UIは素晴らしいデフォルトの選択肢です。高レベルですぐに使用できるコンポーネント（データテーブル、フォーム、オーバーレイ、ナビゲーション）を提供しながら、必要に応じて高度なカスタマイズを可能にします。

v 4の新機能は？

Nuxt UI v 4は大きなマイルストーンとなりました。Nuxt UIとNuxt UI Proは、125以上の量産対応コンポーネントと完全なFigma Kitからなる単一の完全なオープンソースの無料ライブラリに統合されました。

v3からv4への移行はv2からv3への移行よりもはるかにスムーズです。詳細はmigrationガイドをご覧ください。

コア技術

Nuxt UIは、振る舞いとアクセシビリティのためのReka UI、スタイリングのためのTailwind CSS、バリアントを構成するためのTailwind Variantsの3つの基盤で構築されています。

Reka UI

Nuxt UIはコンポーネントの基盤としてReka UIの上に構築されています。

• WAI—ARIA Compliance WAI—ARIAオーサリングプラクティスに従いますに適切なセマンティクスとロールを使用
• キーボードナビゲーション：タブやダイアログなどの複雑なコンポーネントを内蔵キーボードサポート
• Focus Managementユーザーの操作に基づいてフォーカスを移動するインテリジェントなフォーカス処理
• アクセシブルなラベル：スクリーンリーダーのラベル制御を簡素化する抽象化

Tailwind CSS

Nuxt UIは最新のTailwind CSSを統合し、大幅な改善をもたらしました。

• 5x高速ビルド：フルビルドは最大5倍、インクリメンタルビルドは100倍以上高速
• Unified Toolchain組み込みのインポート処理、ベンダープレフィックス、構文変換
• CSSファーストの設定 JavaScriptの代わりにCSSで直接カスタマイズして拡張する
• モダンウェブ機能：コンテナクエリ、カスケードレイヤー、広域色など

Tailwindバリアント

Nuxt UIはTailwind Variantsを利用して、強力なデザインシステムを提供します。

• ** Dynamic Styling**：強力なAPIを備えた柔軟なコンポーネントバリアント
• Type Safety完全なTypeScriptサポートと自動補完
• 競合解決競合するスタイルの効率的なマージ

Keyの特徴

エコシステム統合

Nuxt UIはSSR互換で、エコシステムとシームレスに統合されます。

Vue互換性Nuxtオプション

Nuxt UIはNuxtだけでなく、あらゆるVueプロジェクトで動作します。ViteとVueプラグインを設定に追加するだけです。

• Auto—importsコンポーネントとコンポジブルが自動的にインポートされ、グローバルに利用可能になります
• ** Design System**：カスタマイズ可能な色、サイズ、バリエーションなどによる完全なテーマサポート
• ** Developer Experience**：IntelliSenseと自動補完による完全なTypeScriptサポート

TypeScriptのサポート

Nuxt UIは、優れた開発者エクスペリエンスのための包括的なTypeScript統合を提供する。

• 自動補完すべてのコンポーネントプロップ、スロット、イベント
• Generic Components Vue Genericsの使用
• タイプセーフテーマ In app.config.ts
• IntelliSense：コードベース全体

テンプレート

Nuxt UIは、NuxtとVueの両方に対応したプロダクション対応のテンプレートを提供しています。

• Nuxtテンプレート Starter Landing Docs SaaS Dashboard [Chatxph1999x) Portfolio ) [ph198x Changelog、Editor、Calendar
• Vueテンプレート：Starter、Dashboard、およびChat

FAQ