本章將學習如何在 Nuxt 中優雅地處理錯誤，建立自訂錯誤頁面，並掌握錯誤狀態的管理機制。
1 核心概念
在 Nuxt 的生命週期中，app.vue 是正常的進入點。但在發生致命錯誤 (Fatal Error)時，Nuxt 會拋棄 app.vue，改用 error.vue 來渲染整個畫面。
三個關鍵函數
1. error.vue
這是一個特殊的 Vue 檔案，必須放在 app/ 根目錄下。它接收一個 error prop，讓你讀取錯誤代碼 (如 404, 500)。
2. createError()
主動拋出錯誤。例如：找不到這篇文章時，手動丟出 404。
3. clearError()
這非常重要。因為 SPA (單頁應用) 在發生錯誤後，如果不「清除錯誤狀態」，使用者就算按上一頁也跳不出去。這個函數負責清除錯誤並轉址。
運作邏輯
1. 使用者訪問 /找不到的頁面
2. Nuxt 偵測到 404 錯誤
3. 拋棄 app.vue，改用 error.vue 渲染
4. 使用者點擊「回首頁」→ clearError() 清除狀態並跳轉
2 給 Claude Code 的中文指令 實作重點
我們要建立一個自訂的錯誤頁面，並且做一個「自我毀滅按鈕」來測試它。
請幫我建立全域錯誤處理機制：
- 建立
app/error.vue(這是 Nuxt 的錯誤版型)：- 在
<script setup>定義 props 接收 error 物件 (包含 statusCode 和 message)。 - 匯入
clearError函數。 - 在 template 中顯示一個大大的錯誤代碼 (error.statusCode) 和訊息。
- 加入一個按鈕「回到首頁」，點擊時執行
clearError({ redirect: '/' })。
- 在
- 建立一個測試頁面
app/pages/broken.vue：- 放置一個按鈕「觸發 404 錯誤」。
- 點擊時執行
throw createError({ statusCode: 404, statusMessage: '找不到這個東西！', fatal: true })。
- 重要：請確保 error.vue 有簡單的 CSS 樣式 (例如置中、紅色文字)，讓我很明顯看出來這是錯誤頁。
3 驗收重點
請依照以下步驟進行「破壞測試」：
• 隨機網址測試 (404)：
- 在瀏覽器網址列亂打：
http://localhost:3000/adsgagasd。 - 預期結果：你應該看到你剛剛設計的「錯誤頁面」，顯示 404。而不是 Nuxt 預設的黑白畫面。
- 點擊「回到首頁」按鈕，確認能成功跳轉回首頁。
• 手動觸發測試：
- 進入
http://localhost:3000/broken。 - 點擊「觸發 404 錯誤」按鈕。
- 預期結果：畫面瞬間變成錯誤頁面，顯示「找不到這個東西！」。
💡 架構師筆記 (fatal: true 的重要性)
注意看我在 Prompt 裡加了 fatal: true。
createError({ statusCode: 404, fatal: true })
如果不加 (fatal: false)：
在瀏覽器端 (Client-side) 觸發時，Nuxt 只會把「目前的頁面」蓋掉，但保留 Header/Footer (保留 Layout)。
如果加了 (fatal: true)：
Nuxt 會強制摧毀整個 App，展示全螢幕的 error.vue。
建議：通常對於 404/500 這種大錯，建議加上
fatal: true 讓使用者徹底離開錯誤狀態。