Re:Nuxt

01/20
Lesson P2

Project Setup (Nuxt 4)

Nuxt 4.0 + TailwindCSS + DaisyUI

本實戰篇將介紹如何在 Nuxt 4.0 環境下建立專案，並使用全新的模組化方式安裝 TailwindCSS 與 DaisyUI。

1 Nuxt 4.0 專案建立

1. 建立專案與啟動

npm create nuxt <project-name>
cd <project-name>
npm run dev

Nuxt 4.0 帶來了更簡潔的目錄結構與更快的啟動速度。

2 模組化安裝 TailwindCSS

Nuxt 4 推薦使用 Module 系統來管理 Tailwind：

1. 安裝 Tailwind 模組

npx nuxi@latest module add tailwindcss

這行指令會自動安裝依賴，並自動更新 nuxt.config.ts。

2. 檢查 nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss']
})

看到了嗎？不需要繁瑣的 postcss 設定，只要一行 modules 搞定。

3 安裝 DaisyUI

DaisyUI 目前仍需手動安裝插件：

1. 安裝套件

npm i -D daisyui@latest

2. 設定 tailwind.config.js

在根目錄建立此檔案：

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
};

4 測試與驗收

建立測試頁面 app/pages/index.vue

<template>
  <div class="p-8">
    <h1 class="text-3xl font-bold mb-4">Nuxt 4 + DaisyUI</h1>

    <button class="btn btn-primary mr-2">Primary</button>
    <button class="btn btn-secondary">Secondary</button>

    <div class="card w-96 bg-base-100 shadow-xl mt-8">
      <div class="card-body">
        <h2 class="card-title">Card Title</h2>
        <p>DaisyUI card component works!</p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary">Buy Now</button>
        </div>
      </div>
    </div>
  </div>
</template>

如果能看到有漂亮樣式的按鈕和卡片，代表你的環境建置成功！

P2