從零開始建置 Nuxt 4 專案
前言
很多人第一次接觸 Nuxt 都會問：「我用 Vue 就能開發前端應用，那為什麼還需要 Nuxt？」
其實，當專案逐漸變大時，Vue 本身會遇到一些常見的痛點，例如：路由與資料夾結構難以統一、需要額外設定 SSR 或 SEO、開發環境需要自行組裝、API 與前端分離造成維護成本增加等。
Nuxt 正是為了解決這些問題而誕生的。它在 Vue 的基礎上，提供了 檔案即路由、伺服器端渲染（SSR）、API routes、最佳化預設、專案結構規範 等功能，讓你不需要花時間組裝專案架構，就能直接進入開發。
以下將示範如何從零開始建立一個全新的 Nuxt 4 專案。
1. 安裝必要開發工具
開始之前，請確認你已安裝：
- Node.js（建議使用 LTS） 最低建議使用 Node.js 20.x 或以上
- npm、pnpm 或 yarn 任一套件管理工具
你可以用以下指令確認版本：
1 | node -v |
2. 建立 Nuxt 專案
Nuxt 官方提供 create-nuxt 工具，只需要一行指令即可建立新專案：
1 | pnpm create nuxt@latest my-nuxt-app |
執行後會進入互動式設定流程，包含：
➤ 選擇專案模板
若你要全新專案，建議選 Minimal (Minimal setup for Nuxt 4)
➤ 選擇套件管理工具
建議 pnpm，速度最快。
➤ 是否初始化 Git
➤ 安裝過程
➤ 選擇是否加入 Nuxt 模組
選 Yes 的 modules 清單
| 模組 | 分類 | 用途 |
|---|---|---|
| @nuxt/content | 內容系統 | 用 Markdown 產生網頁 |
| @nuxt/eslint | 品質 | 程式碼風格檢查 |
| @nuxt/hints | 效能 | 顯示最佳化提示 |
| @nuxt/http | API | （舊）HTTP client |
| @nuxt/image | 效能 | 最佳化圖片 |
| @nuxt/scripts | 效能 | 控制 script 載入方式 |
| @nuxt/test-utils | 測試 | Nuxt 的測試環境 |
| @nuxt/typescript-runtime | TS | TS runtime 支援 |
| @nuxt/typescript-build | TS | build-time TS 功能 |
| @nuxt/ui | UI | 官方 UI component 套件 |
你可以依需求選擇模組，我會用的有：
@nuxt/eslint— 整合 ESLint@nuxt/image— 最佳化圖片
下面這些則不需要再裝了：
@nuxt/http（已被更佳方案取代，如 useFetch）@nuxt/typescript-runtime或@nuxt/typescript-build（Nuxt 4 已內建完整 TS 支援）
安裝完成後，進入專案資料夾：
1 | cd my-nuxt-app |
3. 安裝專案套件
使用 pnpm（推薦）：
1 | pnpm install |
或使用 npm：
1 | npm install |
4. 啟動開發伺服器
準備完成後，即可啟動開發環境：
1 | pnpm dev |
或使用 npm：
1 | npm run dev |
終端機會顯示：
1 | Nuxt is running at http://localhost:3000 |
打開瀏覽器就能看到 Nuxt 的預設畫面
總結
Nuxt 幫你把路由、設定、最佳化等細節都處理好，再加上直覺的檔案結構，讓開發 Vue 專案變得更快速、順暢。對於想打造 Vue 全端應用的開發者而言，Nuxt 是非常高效率且容易上手的選擇絕對值得試試。