釋出·  

Nuxt UI v3

Nuxt UI v3 釋出了！經過 1500 多次提交，這次重大重新設計帶來了改進的可訪問性、對 Tailwind CSS v4 的支援以及完整的 Vue 相容性。
Benjamin Canac

Benjamin Canac

@benjamincanac

Sébastien Chopin

Sébastien Chopin

@atinux

Hugo Richard

Hugo Richard

@hugorcd__

我們很高興宣佈 Nuxt UI v3 的釋出，這是我們 UI 庫的全面重新設計，在可訪問性、效能和開發者體驗方面帶來了顯著改進。這次重大更新代表了我們團隊和社群超過 1500 次提交的辛勤工作、協作和創新。

🚀 徹底重構

Nuxt UI v3 代表著我們在為 Vue 和 Nuxt 開發者提供最全面的 UI 解決方案的旅程中邁出的重要一步。此版本已採用現代技術和最佳實踐從頭開始重建。

從 HeadlessUI 到 Reka UI

Reka UI 作為其核心，Nuxt UI v3 提供：

• 所有互動式元件的正確鍵盤導航

• 自動處理 ARIA 屬性

• 焦點管理開箱即用

• 螢幕閱讀器友好的元件開箱即用

這意味著您可以構建適用於所有人的應用程式，而無需成為可訪問性專家。

Tailwind CSS v4 整合

與 Tailwind CSS v4 的整合帶來了巨大的效能改進：

• 執行時快 5 倍，元件渲染最佳化

• 構建時間快 100 倍，得益於新的 CSS-first 引擎

• 更小的包大小，更高效的樣式

您的應用程式將感覺更靈敏，構建更快，併為您的使用者載入更快。

🎨 全新的設計系統

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

📦 滿足各種需求的元件

Nuxt UI v3 擁有 54 個核心元件、50 個 Pro 元件和 42 個 Prose 元件，為幾乎所有 UI 挑戰提供瞭解決方案：

• 資料展示：表格、圖表和視覺化，可適應您的資料

• 導航：選單、選項卡和麵包屑，直觀地引導使用者

• 反饋：Toast、警報和模態框，清晰地傳達資訊

• 表單：輸入、選擇器和驗證，簡化資料收集

• 佈局：網格、容器和響應式系統，精美地組織內容

每個元件都被設計成開箱即用的美觀，並在需要時可深度定製。

🔷 改進的 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，請確保在您的 .npmrc 檔案中設定shamefully-hoist=true或在您的專案根目錄中安裝 tailwindcss。

請訪問我們的文件以探索 Nuxt UI v3 中所有可用的元件和功能。

🙏 感謝

本次釋出代表了我們團隊和社群數千小時的工作。我們要感謝所有為使 Nuxt UI v3 成為現實做出貢獻的人。

我們很高興看到您將用 Nuxt UI v3 構建什麼！

← 返回部落格
Nuxt 在領英上Nuxt on BlueskyNuxt 在 X 上