错误

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

用法

Error 组件渲染一个 <main> 元素，它与 Header 组件配合使用，旨在创建一个延伸至视口可用高度的全屏布局。

Error 组件使用 --ui-header-height CSS 变量来确保其自身在 Header 下方正确对齐。

错误

使用 error prop 来显示错误信息。

在大多数情况下，你会在 error.vue 文件中接收到 error prop。

404

页面未找到

您访问的页面不存在。

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

图标 4.8+

使用 icon prop 在状态码上方显示图标。

404

页面未找到

您访问的页面不存在。

<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 插槽来显示自定义元素，例如 logo。

404

页面未找到

您访问的页面不存在。

<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 prop 来自定义或隐藏清除按钮（通过设置 false）。

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

404

页面未找到

您访问的页面不存在。

<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 prop 来设置点击清除按钮后重定向的用户页面。默认为 /。

404

页面未找到

您访问的页面不存在。

<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

属性

属性默认值类型
as'main'any

此组件应渲染为的元素或组件。

图标any

显示在状态码上方的图标。

errorPartial<NuxtError<unknown> & { message: string; }>
redirect'/'string

清除错误时要重定向到的 URL。

清除trueboolean | ButtonProps

在 links 插槽中显示一个用于清除错误的按钮。 { 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; }

插槽

插槽类型
default{}
前置{ ui: object; }
statusCode{}
statusMessage{}
message{}
links{}

主题

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'
          }
        }
      }
    })
  ]
})

更新日志

暂无近期更新

Container

Container 组件用于居中内容并限制宽度。

Footer

响应式页脚组件。