Nuxt UI Pro v1.0 is out with dashboard components! Discount ends in 2 days.

PageError

A pre-built error component with NuxtError support.

Usage

404

Page not found

The page you are looking for does not exist.

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

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

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

Config

{
  wrapper: 'min-h-[calc(100vh-var(--header-height))] flex flex-col items-center justify-center',
  status: 'text-base font-semibold text-primary',
  name: 'text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl',
  message: 'mt-6 text-base/7 text-gray-500 dark:text-gray-400 text-center',
  links: 'mt-10 flex items-center justify-center gap-x-6',
  default: {
    clearButton: {
      label: 'Go back home',
      color: 'primary',
      size: 'lg'
    }
  }
}