Re:Nuxt

01/20
Lesson P1

Project Setup (Nuxt 3)

建立 Nuxt 3 + TailwindCSS 專案

本實戰篇將帶你建立一個標準的 Nuxt 3 專案，並整合 TailwindCSS。適合想複習 Nuxt 3 建置流程的開發者。

1 專案建立

1. 建立 Nuxt 專案

npx nuxi init my-nuxt-app

2. 安裝依賴並啟動

cd my-nuxt-app
npm install
npm run dev

啟動後開啟 http://localhost:3000。

2 安裝 TailwindCSS

這裡使用 TailwindCSS 4 (搭配 Vite 插件) 的安裝方式：

1. 安裝套件

npm install tailwindcss @tailwindcss/vite

2. 修改 nuxt.config.ts

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  vite: {
    plugins: [
      tailwindcss(),
    ]
  },
  css: ['~/assets/css/main.css']
})

3. 新增 assets/css/main.css

@import "tailwindcss";

4. 安裝 DaisyUI (選用)

npm i -D daisyui@latest

然後在 main.css 加入：

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

3 專案結構調整

app.vue

簡化 app.vue，只留下 NuxtPage：

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

pages/index.vue

建立首頁：

<template>
  <div>
    <h1>Welcome to Nuxt 3</h1>
  </div>
</template>
P1