リリース·  

Nuxt UI v3

Nuxt UI v3がリリースされました！1500以上のコミットを経て、この大規模な再設計により、アクセシビリティの向上、Tailwind CSS v4のサポート、完全なVue互換性が実現しました。
Benjamin Canac

ベンジャミン・カナック

@benjamincanac

Sébastien Chopin

セバスチャン・ショパン

@atinux

Hugo Richard

ユーゴ・リシャール

@hugorcd__

UIライブラリの完全な再設計であるNuxt UI v3のリリースを発表できることを大変嬉しく思います。これにより、アクセシビリティ、パフォーマンス、開発者エクスペリエンスが大幅に向上しました。この主要なアップデートは、当社のチームとコミュニティによる1500以上のコミットにわたる努力、コラボレーション、イノベーションの集大成です。

🚀 ゼロからの再構築

Nuxt UI v3は、VueおよびNuxt開発者向けに最も包括的なUIソリューションを提供するという当社の取り組みにおける大きな飛躍を意味します。このバージョンは、最新のテクノロジーとベストプラクティスを念頭に置いてゼロから再構築されました。

HeadlessUIからReka UIへ

Reka UIを核とするNuxt UI v3は、以下を提供します。

• すべてのインタラクティブなコンポーネントにおける適切なキーボードナビゲーション

• 自動的に処理されるARIA属性

• 確実に機能するフォーカス管理

• そのまま使用できるスクリーンリーダー対応コンポーネント

これにより、アクセシビリティの専門家にならなくても、誰にとっても機能するアプリケーションを構築できます。

Tailwind CSS v4の統合

Tailwind CSS v4との統合により、パフォーマンスが大幅に向上しました。

• 最適化されたコンポーネントレンダリングによる5倍高速なランタイム

• 新しいCSSファーストエンジンによる100倍高速なビルド時間

• より効率的なスタイリングによるバンドルサイズの縮小

これにより、アプリケーションはより軽快に動作し、ビルドが速くなり、ユーザーにとって読み込みが速くなります。

🎨 まったく新しいデザインシステム

<!-- Before: Inconsistent color usage with duplicate dark mode classes -->
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
  <h2 class="text-gray-900 dark:text-white text-xl mb-2">User Profile</h2>
  <p class="text-gray-600 dark:text-gray-300">Account settings and preferences</p>
  <button class="bg-blue-500 text-white px-3 py-1 rounded mt-2">Edit Profile</button>
</div>

<!-- After: Semantic design tokens with automatic dark mode support -->
<div class="bg-muted p-4 rounded-lg">
  <h2 class="text-highlighted text-xl mb-2">User Profile</h2>
  <p class="text-muted">Account settings and preferences</p>
  <UButton color="primary" size="sm" class="mt-2">Edit Profile</UButton>
</div>

新しいカラーシステムには、7つのセマンティックなカラーエイリアスが含まれています。

色デフォルト説明
primaryblueブランドを表す主要な色。
secondaryblueプライマリカラーを補完するセカンダリカラー。
successgreen成功状態に使用されます。
infoblue情報表示状態に使用されます。
warningyellow警告状態に使用されます。
errorredフォームエラー検証状態に使用されます。
neutralslate背景、テキストなどに使用されるニュートラルカラー。

このアプローチにより、特にチームで作業する場合に、コードベースの保守性が向上し、UIの一貫性が高まります。これらのセマンティックトークンを使用すると、ライトモードとダークモードの切り替えが簡単になり、システムは重複するクラス定義を必要とせずに、各テーマに適した色値を自動的に処理します。

💚 完全なVue互換性

Nuxt UIのスコープをNuxtフレームワークを超えて拡張できることを大変嬉しく思います。v3では、Nuxt UIとNuxt UI Proの両方が、あらゆるVueプロジェクトでシームレスに動作するようになりました。これにより、以下のことが可能になります。

• すべてのVueプロジェクトで同じコンポーネントを使用する

• 任意のVueアプリケーションでNuxt UIのテーマシステムを利用する

• Nuxtの外部で自動インポートとTypeScriptサポートを利用する

• 任意のVueプロジェクトで基本的なコンポーネントと高度なProコンポーネントの両方を活用する

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

📦 あらゆるニーズに対応するコンポーネント

54のコアコンポーネント、50のProコンポーネント、42のProseコンポーネントにより、Nuxt UI v3は事実上あらゆるUIの課題に対応するソリューションを提供します。

• データ表示: データに適応するテーブル、グラフ、視覚化

• ナビゲーション: ユーザーを直感的に案内するメニュー、タブ、ブレッドクラム

• フィードバック: 明確に伝達するトースト、アラート、モーダル

• フォーム: データ収集を簡素化する入力、セレクタ、検証

• レイアウト: コンテンツを美しく整理するグリッド、コンテナ、レスポンシブシステム

各コンポーネントは、そのまま美しいだけでなく、必要に応じて深くカスタマイズできるよう設計されています。

🔷 改善されたTypeScript統合

TypeScript統合を完全に刷新し、生産性を向上させる機能を搭載しました。

  • 便利なオートコンプリートによる完全な型安全性
  • 柔軟なAPIのためのジェネリックベースのコンポーネント
  • 明確で一貫性のあるAPIによる型安全なテーマ設定
export default defineAppConfig({
  ui: {
    button: {
      // Your IDE will show all available options
      slots: {
        base: 'font-bold rounded-lg'
      },
      defaultVariants: {
        size: 'md',
        color: 'error'
      }
    }
  }
})

⬆️ v3へのアップグレード

v2からv3へのアップグレードを支援する包括的な移行ガイドを用意しました。完全なオーバーホールによる破壊的変更がありますが、移行が可能な限りスムーズになるよう努力しました。

🎯 はじめに

新しいプロジェクトを開始する場合でも、既存のプロジェクトをアップグレードする場合でも、Nuxt UI v3の導入は簡単です。

# Create a new Nuxt project with Nuxt UI
npx nuxi@latest init my-app -t ui

pnpm add @nuxt/ui@latest
pnpmを使用している場合は、shamefully-hoist=trueを.npmrcファイルに設定するか、プロジェクトのルートディレクトリにtailwindcssをインストールしてください。

当社のドキュメントにアクセスして、Nuxt UI v3で利用可能なすべてのコンポーネントと機能をご覧ください。

🙏 感謝

このリリースは、当社のチームとコミュニティによる何千時間もの作業の集大成です。Nuxt UI v3の実現に貢献してくださったすべての方々に感謝いたします。

Nuxt UI v3で何が構築されるかを見るのが楽しみです！

← ブログに戻る
Nuxt on LinkedInBlueskyのNuxtNuxt on X