Error

GitHub

预构建的错误组件，支持NuxtError。

用法

Error组件呈现一个<main>元素，该元素与Header组件一起工作，以创建一个扩展到视口可用高度的全高布局。

Error组件使用--ui-header-height CSS变量将其自身正确定位在Header下方。

Error

使用error属性显示错误消息。

在大多数情况下，您将在error.vue文件中收到error属性。

error.statusCode

error.statusMessage

error.message

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>

图标：badge{label="4.8+" class="align-text-top"}

使用icon道具在状态代码上方显示图标。

icon

404

Page not found

The page you are looking for does not exist.

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

使用#leading插槽显示自定义元素，如徽标。

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 #leading>
      <img src="https://github.com/nuxt.png" alt="Logo" class="size-10 rounded-full" />
    </template>
  </UError>
</template>

Clear

使用clear属性自定义或隐藏清除按钮（使用false值）。

您可以从Button组件传递任何属性来对其进行自定义。

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属性在点击清除按钮时将用户重定向到另一个页面。

redirect

404

Page not found

The page you are looking for does not exist.

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

示例

内部`error.vue`

在error.vue中使用Error组件：

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>

您可能希望在error.vue文件中复制app.vue的代码，以具有相同的布局和功能，例如：https://github.com/nuxt/ui/blob/v4/docs/app/error.vue

您可以在Nuxt文档中阅读更多有关如何处理错误的信息，但在使用nuxt generate时，建议在createError调用中添加fatal: true，以确保显示错误页面：

pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})
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.
`icon`		`any` The icon displayed above the status code.
`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`		`{ root?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; statusCode?: SlotClass; statusMessage?: SlotClass; message?: SlotClass; links?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`
`leading`	`{ ui: object; }`
`statusCode`	`{}`
`statusMessage`	`{}`
`message`	`{}`
`links`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    error: {
      slots: {
        root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center',
        leading: 'mb-4 flex items-center justify-center',
        leadingIcon: 'size-10 shrink-0 text-primary',
        statusCode: 'text-base font-semibold text-primary',
        statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance',
        message: 'mt-4 text-lg 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({
      ui: {
        error: {
          slots: {
            root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center',
            leading: 'mb-4 flex items-center justify-center',
            leadingIcon: 'size-10 shrink-0 text-primary',
            statusCode: 'text-base font-semibold text-primary',
            statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance',
            message: 'mt-4 text-lg text-muted text-balance',
            links: 'mt-8 flex items-center justify-center gap-6'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Container

A layout element to center and constrain the width of your content.

Footer

A responsive footer for your site links and legal notices.