# 在 VUE 使用 Nuxt UI

---

# 官方 CLI 工具

**預設是 TypeScript 專案！！**

npm create nuxt@latest -- -t github:nuxtlabs/nuxt-ui-vue-starter

---

# 自討苦吃

## ✅ 如果你要用「純 Vue（不是 Nuxt）」來安裝 `@nuxt/ui` —— 是可以的，但要做以下這些事：

> 📌 文件原文路徑：
> 👉 [https://ui.nuxt.com/getting-started/installation/vue](https://ui.nuxt.com/getting-started/installation/vue)

---

## ✅ 安裝 Vue 版 `@nuxt/ui` 時你需要做的事：

### 1️⃣ 你必須先手動建立一個 **Vite + Vue 3 專案**

npm create vite@latest

※ 建立環境的內容參照
{%preview https://hackmd.io/@63Ywhax5TLKtGhFSWnacvQ/rJWPxmpNel %}

---

### 2️⃣ 安裝 Nuxt UI 套件（雖然叫 Nuxt UI，其實 Vue 可用）

npm install @nuxt/ui

---

### 3️⃣ 手動設定 `vite.config.ts`：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui-vite' // 💡 關鍵：使用 Nuxt UI 的 Vite Plugin

export default defineConfig({
  plugins: [vue(), ui()]
})

---

### 4️⃣ 設定 Tailwind CSS（官方建議搭配 Nuxt UI）

npm install -D tailwindcss postcss autoprefixer

#### 🔧 手動建立 Tailwind 設定檔

##### 1️⃣ `tailwind.config.js` 範例：

檔名

tailwind.config.js

內容

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{vue,js}'],
  presets: [require('@nuxt/ui/tailwind')]
}

##### 2️⃣ `postcss.config.js` 範例：

檔名

postcss.config.js

內容

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

#### 📁 放的位置

| 檔案名稱 | 放在哪裡 |
| -------------------- | -------------------------- |
| `tailwind.config.js` | 專案根目錄（`vite.config.ts` 同層） |
| `postcss.config.js` | 同上 |

---

### 5️⃣ 在 `main.js` 載入 CSS

import '@nuxt/ui/dist/tailwind.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

---

## 🧠 小提醒：為什麼這麼麻煩？

因為 Nuxt UI 是設計給 Nuxt 用的，所以非 Nuxt 的 Vue 專案要自己：

* 裝 Vite
* 加 Tailwind
* 加 UI Plugin
* 設 CSS / config
* 自己組裝開發流程

---

## 🟡 結論一句話：

| 使用情境 | 是否需要自己裝 Vite？ | 備註 |
| ---------------- | ------------- | -------------- |
| 使用 **Nuxt 3** 專案 | ❌ 不用 | Nuxt 已經內建 |
| 使用 **純 Vue 專案** | ✅ 需要 | 自己建 Vite + 加套件 |

---