Re:Nuxt

17/20
Lesson 17

Modules Ecosystem

模組生態系

本章將探索 Nuxt 的模組生態系，學習 Module 與 Plugin 的差異，並實作 Tailwind CSS 的模組化安裝。

1 核心概念

Module 與 Plugin 的差別

Plugins (plugins/)

在執行時 (Runtime) 跑。例如：載入 Google Maps SDK。

Modules (modules in config)

在建置時 (Build/Dev time) 跑。它們可以修改 Nuxt 的核心設定、自動產生檔案、自動引入 CSS。

最經典的例子：Tailwind CSS

如果你在普通 Vue 專案裝 Tailwind，你要新增：

postcss.config.js
tailwind.config.js
main.css
... 超級麻煩

但在 Nuxt，你只要裝上 @nuxtjs/tailwindcss 模組，它會幫你把上面那些全部做完。

這就是 Zero Configuration (零設定) 的哲學。

2 給 Claude Code 的中文指令 實作演練

我們要安裝前端最熱門的 Tailwind CSS，並做一張漂亮的卡片來驗證它是否生效。

請複製以下指令給 Claude：

請幫我安裝並設定 Tailwind CSS 模組：

  1. 使用 Nuxt CLI 指令 npx nuxi module add tailwindcss 來安裝模組 (這會自動更新 package.json 和 nuxt.config.ts)。
  2. 如果 CLI 詢問是否安裝依賴，請確認。
  3. 建立一個測試頁面 app/pages/design.vue：
    • 製作一個「卡片 (Card)」元件的 UI。
    • 大量使用 Tailwind Class，例如：bg-blue-500, text-white, rounded-xl, p-6, shadow-lg, hover:scale-105, transition。
    • 內容隨意，例如標題寫「Nuxt x Tailwind」，內文寫「模組化安裝真是太快了！」。
  4. 修改首頁，加入連往 /design 的連結。

3 驗收重點

請檢查 Claude 完成後的結果：

設定檔檢查 (nuxt.config.ts)

確認 modules 陣列裡多了 '@nuxtjs/tailwindcss'。

export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss']
})

視覺檢查

  1. 打開 http://localhost:3000/design。
  2. 關鍵：你應該看到一個有圓角、有陰影、藍色背景的漂亮卡片。
  3. 滑鼠移上去，卡片應該會稍微放大 (hover:scale-105)。
如果只看到醜醜的純文字，代表 CSS 沒載入成功（通常重啟 npm run dev 可以解決）。

💡 架構師筆記 (Nuxt Modules 官網)

以後你需要什麼功能，請先去 Nuxt Modules 官網 搜尋。

  • 要接 Google Analytics？ 搜尋 gtag。
  • 要接 Supabase 資料庫？ 搜尋 supabase。
  • 要優化圖片？ 搜尋 nuxt/image。
重要：不要自己手寫 Webpack 設定，永遠先找 Modules。
17