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 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 といった既製のテンプレートのひとつをクローンすれば、数分で何かが動き出します。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.