收藏
CHAPTER 01 Nuxt 介紹
1.1 Nuxt 簡介
1.2 Nuxt 特性
1.3 Nitro
1.4 水合（Hydration）
CHAPTER 02 建置第一個專案
2.1 使用 Nuxt CLI 建立 Nuxt 專案
2.2 設置 TypeScript + ESLint 環境
2.2.1 TypeScript
2.2.2 ESLint
2.2.3 ESLint Stylistic
2.3 設置 Tailwind CSS 環境
2.3.1 安裝與配置 Nuxt Tailwind
2.3.2 開始感受 Tailwind CSS 的魅力
CHAPTER 03 Nuxt 基礎入門
3.1 Nuxt 目錄結構
3.1.1 Nuxt 預設的目錄結構
3.1.2 Nuxt 完整的目錄結構
3.1.3 Nuxt 的自動匯入（Auto Imports）
3.1.4 關閉自動匯入
3.1.5 顯式匯入（Explicit Imports）
3.1.6 小結
3.2 頁面（Pages）與路由（Routing）
3.2.1 基於檔案的路由（File-based Routing）
3.2.2 約定式路由中的 index
3.2.3 建立第一個頁面
3.2.4 建立多個路由頁面
3.2.5 自動產生的路由
3.2.6 建立路由連結
3.2.7 帶參數的動態路由匹配
3.2.8 匹配所有層級的路由
3.2.9 處理 404 Not Found 找不到頁面的路由
3.2.10 建立多層的目錄結構
3.2.11 巢狀路由（Nested Routes）
3.2.12 導航至具名路由
3.2.13 自定義路由
3.2.14 自定義頁面路由路徑的別名（Alias）
3.3 布局模板（Layouts）
3.3.1 建立一個預設的布局模板
3.3.2 布局模板中的插槽
3.3.3 在布局模板中建立多個插槽（Slots）
3.3.4 布局模板與路由頁面
3.3.5 多個路由頁面共用預設布局模板
3.3.6 建立更多不同的布局模板
3.3.7 動態變更布局模板
3.3.8 更進階的布局模板變更方法
3.3.9 小結
3.4 元件（Components）
3.4.1 元件自動匯入（Auto Imports）
3.4.2 元件直接匯入（Direct Imports）
3.4.3 元件名稱約定
3.4.4 元件名稱的命名規則
3.4.5 動態元件（Dynamic Components）
3.4.6 動態匯入（Dynamic Imports）
3.4.7 僅限用戶端渲染元件
3.4.8 控制伺服器端或用戶端渲染元件
3.4.9 小結
3.5 組合式函式（Composables）
3.5.1 Options API 與 Composition API
3.5.2 建立組合式函式
3.5.3 組合式函式的名稱
3.5.4 組合式函式自動匯入的規則
3.5.5 小結
3.6 通用函式（Utils）
3.6.1 Utils 目錄的自動匯入
3.6.2 組合式函式與通用函式建立的時機
3.6.3 小結
3.7 插件（Plugins）
3.7.1 插件目錄與自動匯入
3.7.2 如何建立插件
3.7.3 在插件中使用組合式函式（Composables）
3.7.4 透過插件提供輔助函式（Providing Helpers）
3.7.5 僅限伺服器端或用戶端中使用
3.7.6 建立自訂插件來整合支援 Vue 套件或插件
3.7.7 建立自訂插件來使用 Vue3-Toastify 套件
3.7.8 使用插件建立 Vue 的自訂指令（Custom Directive）
3.8 模組（Modules）
3.8.1 插件與模組的差異
3.8.2 如何安裝與使用模組
3.8.3 探索 Nuxt 第三方模組
3.8.4 安裝與使用 Nuxt Icon 模組
3.8.5 小結
3.9 中介層目錄（Middleware Directory）
3.9.1 Vue Router 的導航守衛（Navigation Guards）
3.9.2 Nuxt 路由中介層
3.9.3 路由中介層的種類與使用方式
3.9.4 動態添加路由中介層
3.10 Assets 與 Public 資源目錄
3.10.1 Public 目錄
3.10.2 Assets 目錄
3.10.3 路徑別名
3.10.4 建構打包出來的差異
3.10.5 小結
CHAPTER 04 Nuxt 建立後端 Server API
4.1 Nitro Engine
4.2 建立後端 Server API
4.3 Server API 的請求方法與路由
4.3.1 基於檔案的路由
4.3.2 匹配 HTTP 請求方法（HTTP Request Method）
4.3.3 匹配路由參數
4.3.4 匹配包羅萬象的路由（Catch-all Route）
4.3.5 處理 HTTP 請求中的 Body
4.3.6 處理 URL 中的查詢參數（Query Parameters）
4.3.7 解析請求中所夾帶的 Cookie
4.3.8 解析請求中所夾帶的請求標頭（Request Header）
4.3.9 伺服器中介層
4.3.10 伺服器插件
CHAPTER 05 Nuxt 資料獲取（Data Fetching）
5.1 前言
5.2 $fetch 是什麼？
5.2.1 組合式函式 useAsyncData
5.2.2 組合式函式 useLazyAsyncData
5.2.3 組合式函式 useFetch
5.2.4 組合式函式 useLazyFetch5
5.2.5 重新獲取資料
CHAPTER 06 Nuxt 狀態管理（State Management）
6.1 Hydration Mismatch
6.2 組合式函式 useState
6.2.1 useState 使用方法
6.2.2 useState 狀態保留
6.2.3 useState 共享狀態
6.2.4 使用組合式函式建立共享狀態
6.3 狀態管理 - Pinia & Store
6.3.1 前言
6.3.2 安裝與使用 Pinia
6.3.3 Pinia Store 的狀態（State）
6.3.4 Pinia Store 的 Getters
6.3.5 Pinia Store 的 Actions
6.3.6 Pinia Store 的解構和參考
6.3.7 Pinia 持久化插件 – Pinia Plugin Persistedstate
CHAPTER 07 Nuxt Runtime Config & App Config
7.1 Runtime Config
7.1.1 配置 Runtime Config
7.1.2 用戶端使用 Runtime Config
7.1.3 使用 .env 建立環境變數
7.1.4 環境變數的覆蓋
7.2 App Config
7.2.1 在 Nuxt Config 配置 App Config
7.2.2 app.config 檔案
7.2.3 具有響應式的設定
7.3 Runtime Config 及 App Config 特性與差異
CHAPTER 08 Cookie 設置與應用
8.1 Nuxt 管理 Cookie 的方式
8.1.1 組合式函式 useCookie
8.1.2 設置 Cookie
8.1.3 伺服器端使用 getCookie 與 setCookie
8.2 Google OAuth 與 JWT Cookie 的搭配
8.2.1 串接 Google OAuth 登入
8.2.2 伺服器端驗證
8.2.3 產生 JWT 搭配 Cookie 做使用者驗證
CHAPTER 09 動態調整網頁標題與頭部標籤
9.1 組合式函式 useHead
9.1.1 頁面 Head 管理
9.1.2 網頁標題模板
9.1.3 使用外部函式庫檔案
9.1.4 標籤渲染位置
9.1.5 頁面中的 Meta Tags
9.2 組合式函式 useHeadSafe
CHAPTER 10 實戰部落格網站
10.1 建立部落格網站的框架與開發環境
10.1.1 初始化 Nuxt 專案
10.1.2 導入 Nuxt Icon 模組
10.1.3 建立預設布局模板
10.2 建立登入與驗證相關 API
10.2.1 安裝與配置 JWT 套件
10.2.2 建立登入 API 並產生 JWT（JSON Web Token）
10.2.3 建立登出 API
10.2.4 建立查詢使用者資訊 API
10.2.5 建立伺服器中介層（Server Middleware）
10.3 配置 Neon Serverless Postgres 資料庫
10.3.1 建立 Neon Serverless Postgres 資料庫
10.3.2 建立專案 .env 檔案與設定資料庫連線的環境變數
10.3.3 建立 Neon Serverless Postgres 資料庫的連線
10.4 建立文章相關的 Server API
10.4.1 建立新增文章 API
10.4.2 建立取得指定文章 API
10.4.3 建立取得文章列表 API
10.4.4 建立刪除指定文章 API
10.5 建立登入頁面
10.5.1 登入頁面
10.6 建立文章相關頁面
10.6.1 新增文章頁面
10.6.2 指定文章頁面
10.6.3 調整首頁為展示最新文章列表
10.7 建立網站導覽列
10.7.1 導覽列元件
10.8 頁面權限判斷
10.8.1 建立路由中介層
10.8.2 添加建立文章時的路由中介層權限判斷
10.9 SEO 搜尋引擎最佳化
10.9.1 網站頁面標題和 HTML Head 區塊中的標籤
10.9.2 首頁套用頁面的標題模板
10.9.3 指定文章頁面的頁面標題
10.9.4 添加 SEO 搜尋引擎最佳化相關的 Meta Tags
CHAPTER 11 視覺化開發工具 Nuxt DevTools
11.1 前言
11.2 起手式
11.2.1 安裝與啟用 Nuxt DevTools
11.2.2 Nuxt DevTools 迷你面板
11.2.3 開啟 Nuxt DevTools 面板
11.3 Pages
11.3.1 簡介
11.3.2 All Routes
11.3.3 Middleware
11.4 Components
11.4.1 簡介
11.4.2 元件自動分類與計數
11.4.3 元件依賴關係圖
11.4.4 元件檢查器
11.5 Imports
11.5.1 簡介
11.6 Modules
11.6.1 簡介
11.7 Assets
11.7.1 簡介
11.8 Render Tree
11.8.1 簡介
11.9 Runtime Configs
11.9.1 簡介
11.10 Payload
11.10.1 簡介
11.11 Plugins
11.11.1 簡介
11.12 Timeline
11.12.1 簡介
11.13 Open Graph
11.13.1 簡介
11.14 Storage
11.14.1 簡介
11.14.2 雲端服務的 KV
11.15 Server Routes
11.15.1 簡介
11.16 Hooks
11.16.1 簡介
11.17 Virtual Files
11.17.1 簡介
11.18 Inspect
11.18.1 簡介
11.19 Module Contributed View
11.19.1 簡介
11.19.2 VS Code
11.19.3 ESLint Config
11.19.4 Nuxt Icon
CHAPTER 12 SEO 搜尋引擎最佳化實戰系列
12.1 簡介
12.2 搜尋引擎最佳化（SEO）入門
12.3 網站的 Open Graph（OG）
12.4 Nuxt 提供 SEO 使用的組合式函式
12.5 組合式函式 useSeoMeta
12.5.1 name 與 property
12.5.2 useSeoMeta 使用方式與屬性標籤的命名
12.6 組合式函式 useServerSeoMeta
12.7 使用 Nuxt DevTools 來檢查 SEO Meta Tags
12.8 Nuxt SEO 模組
12.8.1 簡介
12.8.2 Nuxt SEO 安裝與配置
12.8.3 自動產生連結縮圖 OG Image
12.8.4 自動產生網站地圖（Sitemap）
12.8.5 Nuxt Sitemap 模組的網站地圖快取
12.8.6 Nuxt 管理 robots.txt 與 Robots Tags
12.8.7 robots.txt 檔案配置與合併規則
12.8.8 Nuxt 管理網站結構化資料標記（Structured Data Markup）
12.8.9 結構化資料的格式與功能
12.8.10 產生 Schema.org 結構化資料標記模組
CHAPTER 13 多國語系 Nuxt I18n
13.1 簡介
13.2 多國語系模組 Nuxt I18n 的基礎入門
13.2.1 安裝與配置 Nuxt I18n
13.2.2 Nuxt I18n 基本使用方法
13.2.3 路由語系前綴
13.2.4 根據偏好或預設語系重新導向
13.2.5 使用 useSwitchLocalePath 產生切換語系的連結
13.2.6 使用 useLocalePath 產生切換語系的連結
13.2.7 每個元件中的獨立翻譯
13.2.8 格式化翻譯
13.2.9 自訂語系的路由路徑
13.3 Nuxt I18n 的 SEO 搜尋引擎最佳化
13.3.1 Nuxt I18n 的 SEO 搜尋引擎最佳化
CHAPTER 14 部署
14.1 簡介
14.2 Nuxt 的渲染模式
14.2.1 通用渲染（Universal Rendering）
14.2.2 靜態網站生成（Static Site Generation）
14.2.3 SWR (Stale-While-Revalidate)
14.2.4 ISR (Incremental Static Regeneration)
14.2.5 混合渲染（Hybrid Rendering）
14.3 部署前的準備
14.3.1 編譯打包與測試
14.4 部署至具有 Node.js 的執行環境
14.4.1 編譯打包
14.4.2 使用 PM2 啟動網站服務
14.4.3 結合 Docker 使用 PM2 啟動網站服務
14.5 將 Nuxt 部署至 Vercel
14.5.1 Vercel 是什麼？
14.5.2 使用 GitHub 作為專案程式碼儲存倉庫
14.5.3 透過 Vercel 部署 Nuxt 專案
14.6 靜態網站部署–Cloudflare Pages
14.6.1 簡介
14.6.2 Nuxt 專案渲染靜態網頁
14.6.3 建立 Cloudflare Pages 專案
14.7 部署至具有其他執行環境
14.7.1 在 Nuxt 專案設定中指定 Preset
14.7.2 在環境變數中指定 Preset
瀏覽器，→並以Chrome開啟我的電子書櫃後，點選『線上閱讀』，即可閱讀您已購買的電子書。建議使用 Chrome、Microsoft Edge有較佳的線上瀏覽效果。
2026專利防護中