前言

在 Vue 專案開發中，可能有遇過這些痛點——網站需要做 SEO，但傳統 SPA 無法有效動態渲染 meta 標籤；或是與後端 API 整合時，缺乏一致性的資料流處理，導致 auth 驗證、中介邏輯難以維護。這時候可以考慮改用 Nuxt ，它是基於 Vue.js 的進階框架，幫你用最少設定快速建立全端應用程式（它可以寫後端哦👍）。

Nuxt 內建許多開發者友善的功能，支援多種前端渲染模式，包含：伺服器端渲染（SSR, Server Side Rendering）、靜態網站生成（SSG, Static Site Generation），以及互動式單頁應用（Single Page Application）等。

不論是打造 SEO 友善的產品官網，還是需要伺服器處理邏輯的全端應用，Nuxt 都提供了靈活又強大的開發工具，協助開發者快速實現各種需求。
接下來這篇文章會帶大家認識 Nuxt ，介紹及分享它提供什麼好方法，幫助我們更有效率、輕鬆地推進專案開發。

Nuxt 前端渲染方式

Nuxt 提供了多種渲染模式，預設的模式是通用渲染（universal rendering），其中伺服器端渲染（SSR, Server Side Rendering）是它最主要的優勢之一，也就是使用者請求頁面時即時生成完整的 HTML，這讓網站對 SEO 更加友善。

客戶端渲染（CSR）

當然，如果想要改成客戶端渲染，Nuxt也有支援切換成客戶端渲染（CSR, Client Side Rendering）模式，只要到 nuxt.config.ts，將 ssr 設為 false，就能讓整個專案進入純 CSR 模式來運行。

export default defineNuxtConfig({
    ssr: false
})

這種模式特別適合不對外開放的內部系統或管理後台，如果目前是使用 Vue CLI 或 Vite 架構，也能無痛升級到 Nuxt，享受它的架構優勢，同時保有 CSR 的開發習慣。

靜態網站生成（SSG）

如果要開發像是技術文件網站、行銷頁面，這類屬於內容固定、不常變動的網站，使用靜態網站生成（SSG, Static Site Generation）的方式是非常適合的選擇。
SSG 的方式是在建置階段，就預先把所有頁面轉成靜態 HTML，使用者切換內容時無需伺服器每次請求，載入速度快、SEO 最穩定。

1. 在 package.json 檔案中新增 generate 指令，例如：

"scripts": {
	.....
	"generate": "nuxt generate",
}

2. 上述設定與製作完成後，如果要開始建置靜態網站，在終端機執行 npm run generate：

npm run generate

3. Nuxt 會自動將所有可預渲染的頁面，輸出成 HTML 與靜態資源（assets），放在 .output/public 或 dist/ 資料夾中，就可以部署到主機上（例如 GitHub Pages 等）。

Nuxt 優勢

自動整合配置 Vite 與 Nitro

Nuxt 的核心是由 Vite + Vue + Nitro 三者組成，讓開發者能在Nuxt框架中，同時處理前端 UI 開發、建構流程優化與後端 API 與 SSR 整合等需求，提升前後端整合協作的效率
( •̀ ω •́ )✧。

使用 Nuxt 建立專案時，框架本身已經預先整合好 Vite（前端建構工具）與 Nitro（後端執行引擎），不需要手動安裝 SSR 工具或額外設定後端框架，可以直接開始撰寫具備前後端能力的網站或應用程式。
也就是說，這代表從一開始，就不必煩惱要選 Webpack 還是 Vite、後端該搭哪個框架，Nuxt 都已經幫你打包整合準備好了，直接開工就對了！

Vite 是什麼？

• Nuxt 採用 Vite 作為前端建構工具與開發伺服器。
• 負責處理 .vue 檔案、JavaScript或TypeScript編譯與 CSS 打包。
• 架構輕量、啟動速度快，支援快速的熱模組更新（HMR, Hot Module Replacement），非常適合需要頻繁調整畫面的前端開發。

Nitro 是什麼？

• Nitro 是 Nuxt 內建的輕量級伺服器引擎。
• 負責處理 SSR、API routes、中介層邏輯（middleware）等後端功能。

基於檔案的路由

Nuxt 採用基於檔案的路由（file-based routing）機制，只要將 .vue 檔案放進 pages/ 資料夾中，框架就會自動建立對應的網址路由，完全不需要額外手動設定 Vue Router。
這樣的設計結合了「高度自動化」與「約定優於配置（Convention over Configuration）」的理念，不僅讓路由結構清晰明瞭、好閱讀，也大幅減少重複性的設定流程。

※ 補充：:id 位置可以放任何值，當作變數使用。

結構範例如下：

pages/interactionHistory/
|__ index.vue  // 列表
|__ add.vue    // 新增
|__ [id].vue     // 修改或查看

如果要製作動態嵌套路由，可以這樣建立：

pages/interactionHistory/
|__ [id]/
    |__ edit.vue   // 對應路由 /interactionHistory/:id/edit

自動引入機制

Nuxt 支援 components、composables 等自動引入（Auto Import）功能，開發者不需要手動寫 import，只要將檔案放在指定資料夾中就能直接使用。
❗但要注意，根據專案規模不同，自動引入的適用性也不同，例如 自動引入對於小型專案可能很方便，但對大型專案可能較為複雜，以下簡單整理說明優勢與可能的風險：

若想更有彈性地控制，也可以設定「局部自動引入」，只讓特定資料夾內的元件自動引入，其他則需手動引入。

透過在 nuxt.config.ts 裡設定，範例如下：
這樣設定後，只有 components/ui/ 與 components/brand/ 底下的元件會自動引入，其他資料夾（例如 components/test/、components/temp/ 等）將不會被掃描，也就是不會被自動引入。

export default defineNuxtConfig({
  components: [
    {
      path: '~/components/ui',
      pathPrefix: false
    },
    {
      path: '~/components/brand',
      prefix: 'Brand'  // 自動為元件名稱加上 Brand 前綴，例如 <BrandBanner/>、<BrandFooter/>。
    },
  ]
})

這種設定方式的優點是：

• 減少不必要的掃描與降低打包體積
• 降低元件命名衝突的風險
• 提升專案架構可控性與維護性

SEO 行銷工具支援

Nuxt 內建支援 SEO 設定，可透過 useHead() 或 definePageMeta() 設定標題、meta、Open Graph 等資訊，也支援整合 Google Analytics（gtag）與自動產生 sitemap，幫助網站在搜尋引擎中有更好的曝光與排名表現，這部分後面會有實作介紹，可以期待一下✨。

API routes

可以直接在 server/api/ 資料夾中放入 .js 或 .ts 檔案，Nuxt 會自動建立對應的後端 API 路由，每個檔案會對應一個API端口位址，支援 GET、POST、PUT、DELETE 等 HTTP 方法。

server/
|__ api/
    |__ search.js  // 對應 API 路由：/api/search

不需要額外安裝 Express 或設定後端框架，用 JavaScript 就能快速寫出後端邏輯&API。

Nuxt 內建後端能力，讓我們在寫前端的同時，也能輕鬆寫 API。

來個小總結！

從自動整合 Vite 與 Nitro、自動路由與自動引入，到 SEO 優化與 API routes 支援，Nuxt 幾乎幫你預設好所有開發架構中該考慮的事。不需要反覆研究框架組裝、不必手動配置繁瑣的 SSR 環境，只要專注在寫畫面、處理資料、實現功能，讓我們可以專注在開發功能本身。

其他延伸應用

可以到 Nuxt github 查看最新版本（例如 v4.0.3），也能到 Releases 頁面查看更新日誌，了解未來的更新方向。
除了 Nuxt 主框架外，官方團隊也成立了延伸組織 NuxtLabs，專門開發與維護一系列工具與服務，為整個 Nuxt 生態系提供更完整的支援與擴充能力。

這裡列出幾項實用的工具介紹他們的用途——

Nuxt UI

是一套專為 Nuxt 設計的UI 套件，內建常見的使用者介面功能，像是主題切換（Theme Toggle）、多語系支援、多種網頁元件等等，非常適合快速開發具有一致性設計的介面。
還有在前面篇章有提到如何使用 Figma 製作 Mockup，若有興趣了解可參考第七篇。貼心的是，官方也提供了對應的 Figma 設計稿，能直接模擬元件行為與各種狀態，幫助我們快速調整設計原型，例如 微調顏色、字距、樣式變化等細節，完全不需要從零開始拉線框，節省大量設計時間，真的超方便 ✨！

（ Figma UI kits畫面 圖片來源）

Nuxt DevTools

Nuxt DevTools 內建於 Nuxt 中且預設是開啟的，開發時能即時檢查元件結構、狀態、路由、meta 資訊與 SEO 配置 等。
若開發完成後想關閉 DevTools，只需要在 nuxt.config.ts 中設定即可，範例如下：

export default defineNuxtConfig({
  devtools: { enabled: false },
})

Nuxt Image

這是 Nuxt 提供的專用圖片處理工具，可針對圖片效能進行最佳化。當網站中含有大量圖片時，若一次性全部載入，會導致載入緩慢、體驗下降，甚至出現「圖片破圖」的狀況。而使用 Nuxt Image 時，Lazy Loading（延遲載入）預設就會啟用，尚未捲動到的圖片不會立即載入，大幅減少初始頁面重量、加快速度。
此外，<NuxtImg> 元件比原生的 <img> 更強大，可直接設定裁切方式、背景填色、圖片品質等屬性，某些功能在原生 <img> 中通常需要搭配額外的 JavaScript 或第三方工具處理，但在 Nuxt Image 僅透過簡單設定即可完成。Nuxt Image 特別適合給電商網站、行銷著陸頁這類圖片密集的網站。

其他還有很多很棒的工具✨，可以至NuxtLabs官網深入了解。

結語

Nuxt 幫助網站開發能具備更好的 SEO 表現、更快速的效能，以及更靈活的開發體驗。如果你已經熟悉 Vue，那麼 Nuxt 絕對是一個值得一試的進階框架選擇。
從自動化路由、元件引入，到整合 Vite（前端建構）與 Nitro（後端引擎），再到 SEO 支援、API routes、靜態網站生成功能，Nuxt 幾乎已經為開發者處理好，在專案初期會遇到的架構抉擇與設定問題，讓我們能專注在真正該思考的事情上——介面設計、資料處理，以及使用者互動體驗。

參考資料與延伸閱讀

⑴ Nuxt 官方參考來源
⑵ Nuxt pages 參考來源
⑶ Nuxt useHead 參考來源
⑷ Nuxt github 來源
⑸ NuxtLabs 參考來源
⑹ Nuxt UI Figma UI kits 來源
⑺ Nuxt Nitro 參考來源
⑻ Nuxt Vite 參考來源
⑼ github 更新日誌來源