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 安裝 Tailwind CSS 與 DaisyUI

使用 Vite 插件方式安裝 TailwindCSS 與 DaisyUI：

1. 安裝套件

npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

2. 設定 nuxt.config.ts

加入 Tailwind CSS Vite 插件：

// https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  vite: {
    plugins: [tailwindcss()],
  },
  css: ["./app/tailwind.css"],
})

3. 新增 app/tailwind.css

@import "tailwindcss";
@plugin "daisyui";

4. 修改 app/app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

3 建立測試頁面

新增 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>

4 啟動專案

npm run dev

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

P2