UI 生態系 (UI Ecosystem)

Nuxt 擁有豐富的 UI 生態系，讓開發者能專注於邏輯而非重複造輪子。本章介紹三個核心模組：Nuxt UI、Nuxt Icon 與 Nuxt Fonts。

Nuxt UI

Nuxt UI 是官方推薦的 UI 元件庫。它基於 Headless UI 與 Tailwind CSS，提供了一套美觀、無障礙且可高度客製化的元件。

Install Nuxt UI

$ npx nuxi@latest module add ui

Dark Mode

開箱即用的深色模式支援

Keyboard

完整的鍵盤導航支援

Themable

透過 App Config 全域設定

在 app.config.ts 中設定全域樣式：

app.config.ts

export default defineAppConfig({
  ui: {
    primary: 'emerald',
    gray: 'slate',
    button: {
      default: {
        variant: 'solid',
        color: 'primary'
      }
    }
  }
})

圖標系統 (Nuxt Icon)

@nuxt/icon 模組讓您可以存取超過 100,000 個圖標 (Iconify)。

Install Icons

$ npx nuxi@latest module add icon

heroicons:home

logos:vue

ph:rocket-duotone

components/IconDemo.vue

<template>
  <!-- 使用 Icon 元件 -->
  <Icon name="heroicons:home" class="w-6 h-6 text-emerald-500" />
  
  <Icon name="logos:nuxt-icon" size="24" />
</template>

字型優化 (Nuxt Fonts)

@nuxt/fonts 模組會自動下載並優化您使用的 Web Fonts，消除 Layout Shift (CLS) 並提升載入速度。

Install Fonts

$ npx nuxi@latest module add fonts

assets/css/main.css

/* assets/css/main.css */
@theme {
  /* 直接使用 Google Fonts 名稱，Nuxt 會自動處理 */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}