Nuxt3 自訂錯誤頁面

Nuxt3 有預設的錯誤頁面，該如何替換呢？

錯誤頁面

我們可以在專案路徑下(和 nuxt.config.ts 同一層)建立 error.vue，發生錯誤時就會導向至 error.vue 頁面了。

不過有時候並不是所有錯誤都顯示 error.vue，例如 404 頁面，這時候就可以在 error.vue 中將指定的 HTTP 狀態碼再跳轉至特定頁面了

404 頁面

在 error.vue 中增加以下程式碼，透過判斷狀態碼等於 404 時將網址跳轉到 /404

    
<script setup lang="ts">
const props = defineProps({
    error: Object
})

let statusCode = props.error?.statusCode || 500

if (statusCode === 404) {
    // 跳轉到自訂的 404 頁面
    clearError({ redirect: '/404' })
}
</script>
    

然後在 pages 資料夾下建立 404.vue ，之後存取沒有定義的路徑時就會自動重定向至 404 頁面了