Nuxt UI: Vue アプリケーションのための直感的なコンポーネントライブラリ

Vue アプリケーションをゼロから構築するということは、ビジネスロジックを 1 行も書く前に何十もの決定を下すことを意味します。どのコンポーネントライブラリを使うか、アクセシビリティをどう扱うか、デザインシステムをスケール可能にするにはどうするか、フレームワークとの結合度をどの程度にするか。Nuxt UI は、エディタを開く前にこれらの疑問のほとんどに答えてくれます。

Nuxt UI とは

Nuxt UI は、以下の 3 つのコア技術の上に構築された無料のオープンソース Vue コンポーネントライブラリです。

• Reka UI — キーボードナビゲーション、フォーカス管理、スクリーンリーダーサポートをすぐに扱えるヘッドレスでアクセシブルなプリミティブ
• Tailwind CSS — CSS ファーストの設定モデルを備えたユーティリティファーストのスタイリング
• Tailwind Variants — コンポーネントのバリアントを管理し、スタイル競合をきれいに解決する型安全な API

その結果、125 以上の本番運用可能なコンポーネントが提供され、デフォルトでアクセシブル、見た目も洗練されており、カスタマイズも容易です。

ひとつ重要な補足として、その名前に反して、Nuxt UI は Nuxt 専用ではありません。Vite プラグインを介して、あらゆる Vue プロジェクトで同等に動作します。素の Vue、Vue Router、Vite で構築している場合でも、わずかな設定行数でセットアップが完了します。

Nuxt UI は Vue エコシステムのどこに位置するか

Vue コンポーネントライブラリを評価する際の本当の問いは、「十分なコンポーネントがあるか?」ではなく、「自分の構築スタイルに合っているか?」です。

ここでは、Nuxt UI が一般的な代替手段と比べてどこに位置するかを示します。

ライブラリ	デザインシステム	Tailwind ネイティブ	アクセシビリティ	Nuxt 統合
Nuxt UI	カスタム、柔軟	✅ あり	✅ Reka UI	✅ ファーストクラス
Vuetify	Material Design	❌ なし	✅ 良好	⚠️ 手動
PrimeVue	カスタマイズ可能	⚠️ オプション	✅ 良好	⚠️ 手動
shadcn-vue	カスタム	✅ あり	✅ Reka UI	⚠️ 手動

スタックにすでに Tailwind CSS が含まれており、データテーブル、フォーム、オーバーレイ、ナビゲーションといった高レベルなコンポーネントを自前で構築せずに使いたい場合、Nuxt UI は自然な選択です。

はじめに: インストール

Nuxt プロジェクトの場合、モジュールを nuxt.config.ts に追加します。

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

次に、アプリを UApp でラップし、CSS エントリーファイルでスタイルをインポートします。

@import "tailwindcss";
@import "@nuxt/ui";

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

標準的な Vue + Vite プロジェクトの場合、Vite プラグインを設定します。

// 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()]
})

その後、main.ts でプラグインを登録し、同じ CSS をインポートします。コンポーネントとコンポーザブルは、どちらのセットアップでもグローバルに自動インポートされます。

知っておくべき主要機能

追加作業なしのアクセシビリティ。 Nuxt UI は Reka UI 上に構築されているため、モーダル、タブ、ドロップダウンといった複雑なコンポーネントが ARIA 属性、フォーカストラップ、キーボード操作を自動的に処理します。コンテキスト内でのテストは依然として必要ですが、土台は堅牢です。

全体を通じた TypeScript 対応。 すべてのコンポーネントの props、slot、event は型付けされています。app.config.ts を介したテーマ設定は型安全で、ライブラリ全体でコンポーネントの props、slot、コンポーザブルが完全に型付けされています。

戦わなくて済むテーマ機能。 Nuxt UI v4 は CSS ファーストの設定モデルを採用しています。色、サイズ、バリアントのカスタマイズは CSS または app.config.ts で行われ、JavaScript の設定ファイルと格闘する必要はありません。

13 カテゴリにわたる 125 以上のコンポーネントには、ダッシュボード、AI チャットインターフェイス、リッチテキスト編集、Nuxt Content 統合のための専門グループも含まれています。これらは、ほとんどの Tailwind CSS Vue コンポーネントライブラリでは提供されていない領域です。

Nuxt UI が適切な選択肢となるとき

以下のようなニーズがある場合、Nuxt UI は理にかなった選択です。

• 別途デザイントークンシステムを必要としない Tailwind ネイティブなコンポーネント
• 後付けではなく、プリミティブレベルで処理されるアクセシビリティ
• SSR、i18n、カラーモードサポートがファーストクラスの Nuxt 4 UI コンポーネント
• 有料コンポーネントが存在しない 無料の MIT ライセンスライブラリ(Nuxt UI Pro は v4 で本体ライブラリに統合されました)

Material Design が必要な場合、コンポーネントのソースを自分のリポジトリにコピーする方式を好む場合(代わりに shadcn-vue を検討)、またはモバイルやデスクトップを対象とするクロスプラットフォームアプリを構築している場合(Quasar を検討)には適していません。

まとめ

Nuxt UI は、Vue 開発の初期段階を遅らせる足場作りの負担を取り除きます。アクセシブルなコンポーネント、一貫したデザインシステム、TypeScript が組み込まれているため、プリミティブの再構築ではなく、アプリケーションが本来果たすべき機能に集中できます。

公式ドキュメントから始めるか、Dashboard、SaaS、Landing、Starter といった既製のテンプレートのひとつをクローンすれば、数分で何かが動き出します。

よくある質問

Nuxt なしで Nuxt UI を使えますか?

はい。名前からは想像しにくいかもしれませんが、Nuxt UI には標準的な Vue 3 プロジェクトで動作する Vite プラグインが同梱されています。パッケージをインストールし、vite.config.ts でプラグインを登録し、CSS をインポートします。コンポーネントとコンポーザブルは、Nuxt アプリケーションと同じ方法で自動インポートされます。

Nuxt UI Pro はいまだに別の有料製品ですか?

いいえ。バージョン 4 時点で、Nuxt UI Pro は MIT ライセンスの下、本体オープンソースライブラリに統合されました。これまで有料層に閉じ込められていたコンポーネント(ダッシュボードレイアウト、高度なデータテーブル、ランディングページのブロックなど)は、サブスクリプションやライセンス料なしで、すべてのユーザーが自由に使えるようになりました。

Nuxt UI と shadcn-vue の違いは何ですか?

どちらも Reka UI のプリミティブと Tailwind CSS を使っているため、アクセシビリティとスタイリングは似ています。主な違いは提供方法です。shadcn-vue はコンポーネントのソースを自分のリポジトリにコピーして完全に所有する方式である一方、Nuxt UI は依存関係としてインストールされ、設定でテーマを管理します。ソースを管理したいなら shadcn-vue、より速い更新とメンテナンス負担の軽減を求めるなら Nuxt UI を選びましょう。

Nuxt UI はダークモードと国際化をサポートしていますか?

どちらもサポートしています。カラーモードはファーストクラスでサポートされており、コンポーネントは CSS 変数を通じてライトテーマとダークテーマに自動的に適応します。国際化は、組み込みのロケール設定と @nuxtjs/i18n などのツールとの統合を通じてサポートされており、ページネーションのラベルやフォームメッセージといったコンポーネントの文字列を翻訳できます。