Nuxt.js 入門教學筆記 | 學習筆記
Nuxt.js 是一個基於 Vue.js 的漸進式框架，專為構建伺服器端渲染（SSR）和靜態站點生成（SSG）應用程式而設計。它提供開發者一個強大的開發體驗，並簡化 Vue.js 應用的架構與設定，適合 SEO 優化、效能最佳化以及提升開發效率。
Nuxt.js 的核心特性包括：
- 伺服器端渲染（SSR）：增強 SEO 並提升初始載入速度。
- 靜態站點生成（SSG）：透過預先生成 HTML 提供更快的載入時間。
- 自動路由：基於
pages目錄的檔案自動建立對應的路由，無需額外配置 Vue Router。 - 模組系統：支援大量 Nuxt 模組（如 TailwindCSS、PWA、Auth 等）來快速擴展功能。
- 組態簡單：預設優化 Vue.js 應用的結構與設定，減少繁瑣的配置工作。
- 組件自動載入：Nuxt 可自動載入
components目錄內的 Vue 組件，減少import的需求。
二、安裝與初始化 Nuxt.js
1. 使用 Nuxt CLI 安裝（推薦方式）
Nuxt 提供官方 CLI 工具 nuxi 來建立新專案。
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
上述指令會自動建立一個 my-nuxt-app 專案，並下載 Nuxt 相關相依套件。
2. 使用 create-nuxt-app 安裝（舊版方式）
如果要使用較舊的安裝方式，也可以透過 create-nuxt-app 指令來建立專案：
npx create-nuxt-app my-nuxt-app
此方法會提供互動式選單，讓開發者選擇 UI 框架（TailwindCSS、Bootstrap）、插件（Axios、PWA）以及 Nuxt 模式（SSR 或 SSG）。
3. 啟動開發伺服器
安裝完成後，可以執行以下指令來啟動開發環境：
npm run dev
預設會啟動本機伺服器 http://localhost:3000，可在瀏覽器中打開檢視。
三、專案結構
Nuxt.js 採用約定式（Convention over Configuration）架構，專案目錄結構如下：
my-nuxt-app/
│── assets/ # 未編譯的靜態資源，如 CSS、圖片
│── components/ # Vue 組件（自動載入）
│── layouts/ # 頁面佈局
│── pages/ # 自動建立的路由頁面
│── plugins/ # Nuxt 插件，如 Vue 插件或第三方庫
│── public/ # 靜態資源，可直接透過 URL 存取
│── server/ # 伺服器端 API（Nuxt 3）
│── store/ # Vuex 狀態管理（Nuxt 2，Nuxt 3 改用 `pinia`）
│── nuxt.config.ts # Nuxt 設定檔
│── package.json # npm 套件設定
四、路由與頁面
1. 自動建立路由
Nuxt.js 會根據 pages/ 目錄內的 Vue 檔案自動產生對應的路由。例如，在 pages/index.vue 建立首頁：
<template>
<div>
<h1>歡迎來到 Nuxt.js</h1>
</div>
</template>
若在 pages/about.vue 建立新的 Vue 檔案，則 http://localhost:3000/about 會自動對應到該頁面。
2. 動態路由
可以使用 _ 命名的方式建立動態路由。例如，在 pages/blog/_id.vue：
<template>
<div>
<h1>文章 ID: {{ route.params.id }}</h1>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>
訪問 http://localhost:3000/blog/123，頁面將顯示 文章 ID: 123。
五、Nuxt 組件與佈局
1. 自動載入組件
在 components/ 內的 Vue 檔案會自動載入，例如建立 components/Navbar.vue：
<template>
<nav class="bg-blue-500 p-4 text-white">
<h1>網站導覽列</h1>
</nav>
</template>
然後在 pages/index.vue 內直接使用 <Navbar />，無需 import：
<template>
<div>
<Navbar />
<h1>首頁內容</h1>
</div>
</template>
2. 佈局（Layouts）
佈局是共享的頁面結構，可在 layouts/default.vue 內定義：
<template>
<div>
<Navbar />
<slot />
</div>
</template>
所有 pages/ 內的頁面會自動套用 default.vue 佈局。
六、Nuxt 伺服器端 API（Nuxt 3）
Nuxt 3 內建簡單的 API 伺服器，可在 server/api/hello.ts 新增 API：
export default defineEventHandler((event) => {
return { message: "Hello from Nuxt API" };
});
這樣就可以透過 http://localhost:3000/api/hello 訪問該 API。
七、Nuxt 資料獲取
1. useFetch() 獲取 API 資料
Nuxt 3 提供 useFetch 來處理 API 讀取，例如：
<template>
<div>
<h1>{{ data.message }}</h1>
</div>
</template>
<script setup>
const { data } = useFetch('/api/hello');
</script>
這會自動調用 server/api/hello.ts 並顯示回應內容。
八、部署 Nuxt 應用
1. 生成靜態站點
若要將 Nuxt 部署為靜態網站，可執行：
npm run build
npm run generate
這會在 dist/ 目錄內產生靜態 HTML 檔案，可直接部署到 Netlify 或 Vercel。
2. 部署至 Vercel
使用 Vercel CLI 部署：
npm install -g vercel
vercel
即可快速部署 Nuxt 應用。
九、結語
Nuxt.js 提供強大的功能來簡化 Vue.js 開發，透過自動路由、組件自動載入、伺服器 API 以及資料獲取等功能，大幅提升開發效率。對於需要 SEO 優化或靜態站點的專案而言，Nuxt 是一個非常適合的選擇。