PageError

A pre-built error component with NuxtError support.

Usage

404

Page not found

The page you are looking for does not exist.

<UPageError
  :status="404"
  name="Page not found"
  message="The page you are looking for does not exist."
/>

You'll usually use this component in your error.vue file:

error.vue
<template>
  <div>
    <UHeader />

    <UContainer>
      <UMain>
        <UPage>
          <UPageError :error="error" />
        </UPage>
      </UMain>
    </UContainer>
  </div>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

defineProps<{
  error: NuxtError
}>()
</script>
You might want to replicate the code of your app.vue inside your error.vue file to have the same layout and features, here is an example: https://github.com/nuxt/ui/blob/dev/docs/error.vue

You can read more about how to handle errors in the Nuxt documentation, but when using nuxt generate it is recommended to add fatal: true inside your createError call to make sure the error page is displayed:

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

Props

name
string
"An error occurred"
ui
{}
{}
error
any
undefined
status
number
404
message
string
"This is not the page you're looking for."
clearButton
{}
{}