本篇搭配 nuxt v3.15、node v20

為了避免開發者的學習負擔，Nuxt 框架並未內建完整所需的功能。這樣的設計保持核心功能簡潔，同時透過模組系統，簡化了應用程式的擴充過程，提升功能整合的效率。

Nuxt 的開發者都知道，插件（Plugins）跟模組（Modules）都能用來擴充應用程式的功能。不過比起插件，模組的使用方式更簡單，因模組已經將套件邏輯封裝好，與 Nuxt 應用整合。Nuxt Modules 提供許多 Nuxt 官方與社群開源的模組，安裝後，只需在 nuxt.config.ts 設定檔配置該模組即可使用。

本篇文章針對進階開發者，逐步解析模組的設計方式，以及如何將模組封裝並發布供專案或團隊使用，豐富應用程式功能。

閱讀更多

本篇搭配 @nuxt/image v1.8.0

網站體驗指標（Web Vitals） 是 Google 定義的一組用來衡量網站使用者體驗的指標，這些指標反映了使用者在瀏覽網站時的實際體驗，會影響網站在搜尋引擎上的排名。

自 2024 年 3 月起，三大核心指標（Core Web Vitals）更新如下：

• 最大內容繪製（LCP，Largest Contentful Paint）：測量頁面主要內容的載入效能
• 互動至下一次繪製（INP，Interaction to Next Paint）：測量頁面在使用者互動過程中的回應速度
• 累積版面位移（CLS，Cumulative Layout Shift）：測量視覺穩定性，避免不預期的版面配置位移

網站的圖片與這些核心指標密切相關，因為頁面上的主要元素通常包含圖片。圖片的大小直接影響載入速度，進而影響使用者互動的回應時間。如果圖片未設定固定的寬高比例，甚至會導致版面配置位移，進而影響使用者體驗。

閱讀更多

TypeScript extends 有三種用法，語義和應用場景上有所不同，因此筆記起來讓自己參考使用。

Extends 用法

• 介面繼承
• 泛型約束
• 條件判斷

閱讀更多

Interface 和 Type 是用來定義型別的兩種語法，那麼兩者又有什麼區別呢？

閱讀更多

為什麼需要 Nuxt DevTools？

Nuxt DevTools 是 Nuxt 團隊推出的視覺化開發工具，用來協助我們快速了解 Nuxt 專案的內容，近一步提升開發者體驗（DX，Developer Experience）。

關於開發者體驗（DX）介紹，這裡推薦一篇文章

Nuxt3 提供許多內建功能，例如：

• 預設使用 Vite 打包工具，支援 hot module replacement（HMR）
• 引入伺服器引擎 Nitro，讓我們可以將應用程式部署到 Vercel、Netlify、Cloudflare 等託管服務
• 許多內建功能，像是支援 TypeScript、各種組合式函式、SEO 搜尋引擎優化輔助函式等
• auto-imports 自動引入功能
• 依據檔案結構自動生成路由與 API 路徑
• 提供許多模組，讓開發者可以快速整合所需的功能，不需另外進行配置

這些功能是 DX 最直接具體的實踐，雖然能讓我們能輕鬆建立 Nuxt3 專案，但也會面臨「資訊透明度不足」的問題。抽象化設計是一把雙面刃，在化繁為簡、避免重工的同時，也會增加額外的學習負擔與除錯困難。

Nuxt DevTools 便是為了解決此問題而設計的視覺化工具，能夠提升 Nuxt 框架和應用程式的透明度、找到效能瓶頸，以及協助我們管理應用和配置。

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

專案開發完成後，終於到最後一步「部署」，本篇將說明 Universal 專案部署到 Firebase。Universal 渲染模式需要伺服器才能運作，因此會搭配 Firebase Cloud Functions（Serverless）來協助處理 SSR 的部分。

Universal Rendering 相關說明可以參考 這篇文章

實作分為以下步驟：

• 申請 Firebase Project
• 透過 CLI 部署至 Firebase

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

專案開發完成後，終於到最後一步「部署」，本篇使用靜態網站生成（SSG），搭配 GitHub Pages 託管靜態網頁內容。

Static Site Generation（SSG）靜態網站生成

在編譯時產生靜態 HTML 頁面。靜態部署適合內容固定、不需資料庫、不含伺服器端動態渲染的網站（例如公司形象網站或是個人部落格），雖然不像 Universal Rendering 一樣彈性，不過靜態網站很適合搭配 CDN 緩存。

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt3 搭配了新的伺服器引擎 Nitro，讓我們能輕鬆建立 Server API，並在 Nuxt3 專案內使用。Nitro 的優點包含跨平台支援 Node.js 與瀏覽器、支援 HMR、自動生成 API 路由等。

實務上 API 開發常會搭配資料庫連接，本篇將說明如何結合 MongoDB，實作後端 API 開發與前端串接，讓我們的 Nuxt 專案具備全端功能。

本文重點在 Nuxt 與 MongoDB 整合，需先具備以下知識：

• Nuxt Server API，可以參考 這篇文章
• Nuxt $fetch 方法，可以參考 這篇文章
• MongoDB 應用（本文僅簡單說明）

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Sitemap 是一種用來提供網站資訊的檔案，記錄網站內的網頁、圖片等，主要功用為協助搜尋引擎快速了解我們的網頁。

新網站上線後，雖然搜尋引擎爬蟲會自動讀取網站內容並收錄，不過當網站規模較大、架構較複雜、彼此間連結性較低，可能需要花較長的時間才能完整收錄，透過 Sitemap，直接告訴搜尋引擎網頁資訊，能有效加快網頁收錄的速度。

接下來說明如何在 Nuxt3 專案內加入 Sitemap 網站地圖：

閱讀更多

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Nuxt3 提供兩個資料夾 assets/ 以及 public/，用來管理靜態資源，像是圖片、CSS 樣式、字體、icon 等，接下來說明兩個目錄適合存放的檔案類型與使用方式

閱讀更多