Error

GitHub
A pre-built error component with NuxtError support.

Usage

Like the Main component, the Error component renders a <main> element that works together with the Header component to create a full-height layout that extends to the viewport's available height.

The Header component defines its height through a --ui-header-height CSS variable, which you can customize by overriding it in your CSS:
:root {
  --ui-header-height: calc(var(--spacing) * 16);
}

Error

Use the error prop to display an error message.

In most cases, you will receive the error prop in your error.vue file.

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Clear

Use the clear prop to customize or hide the clear button (with false value).

You can pass any property from the Button component to customize it.

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    :clear="{
      color: 'neutral',
      size: 'xl',
      icon: 'i-lucide-arrow-left',
      class: 'rounded-full'
    }"
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Redirect

Use the redirect prop to redirect the user to a different page when the clear button is clicked. Defaults to /.

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    redirect="/getting-started"
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Examples

Within error.vue

Use the Error component in your error.vue:

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

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

<template>
  <UApp>
    <UHeader />

    <UError :error="error" />

    <UFooter />
  </UApp>
</template>
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/v3/docs/app/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>

API

Props

Prop Default Type
as

'main'

any

The element or component this component should render as.

error

Partial<NuxtError<unknown> & { message: string; }>

redirect

'/'

string

The URL to redirect to when the error is cleared.

clear

true

boolean | ButtonProps

Display a button to clear the error in the links slot. { size: 'lg', color: 'primary', variant: 'solid', label: 'Back to home' }

ui

Partial<{ root: string; statusCode: string; statusMessage: string; message: string; links: string; }>

Slots

Slot Type
default

{}

statusCode

{}

statusMessage

{}

links

{}

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    error: {
      slots: {
        root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center',
        statusCode: 'text-base font-semibold text-[var(--ui-primary)]',
        statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-[var(--ui-text-highlighted)] text-balance',
        message: 'mt-4 text-lg text-[var(--ui-text-muted)] text-balance',
        links: 'mt-8 flex items-center justify-center gap-6'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        error: {
          slots: {
            root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center',
            statusCode: 'text-base font-semibold text-[var(--ui-primary)]',
            statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-[var(--ui-text-highlighted)] text-balance',
            message: 'mt-4 text-lg text-[var(--ui-text-muted)] text-balance',
            links: 'mt-8 flex items-center justify-center gap-6'
          }
        }
      }
    })
  ]
})

DropdownMenu

A menu to display actions when clicking on an element.

Footer

A responsive footer component.