How to Customize the 404 Page in Nuxt

2025-03-15 04:21:36

Method 1: Custom 404 Page via Pages Directory¶

touch pages/[...404].vue

Non-standard recommended approach.

Method 2: Global Error Handling with `error.vue`¶

touch layouts/errors/404.vue

touch error.vue

<template>
    <Error404 v-if="error.statusCode === 404" />
    <NuxtErrorPage v-else :error="error" />
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'
import Error404 from '~/layouts/errors/404.vue'
import NuxtErrorPage from '#app/components/nuxt-error-page.vue'

const props = defineProps({
    error: Object as () => NuxtError
})
</script>

Customize only the 404 page component while letting Nuxt handle other errors natively.

See Also¶