Usage

status

name

message

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"

{}

{}

error

any

undefined

message

string

"This is not the page you're looking for."

status

number

404

clearButton

{}

{}

PageLinks

A list of links to display in your pages.

PricingCard

A pre-built Card with all you need to display a pricing plan.