Error^PRO

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

用法

与 Main 组件类似，Error 组件渲染一个 <main> 元素，它与 Header 组件协同工作，创建延伸至视口可用高度的全高布局。

Header 组件通过 CSS 变量 --ui-header-height 定义其高度，您可以通过在 CSS 中覆盖它来自定义。

:root {
  --ui-header-height: --spacing(16);
}

错误

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

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

error.statusCode

error.statusMessage

error.message

404

页面未找到

您正在查找的页面不存在。

<template>
  <UError
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</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 在点击清除按钮时将用户重定向到不同的页面。默认为 /。

redirect

404

页面未找到

您正在查找的页面不存在。

<template>
  <UError
    redirect="/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/v3/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, () => queryContent(route.path).findOne())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

API

属性

属性	默认值	类型
`as`	`'main'`	`any` 此组件应渲染为的元素或组件。
`error`		`Partial<NuxtError<unknown> & { message: string; }>`
`redirect`	`'/'`	`string` 清除错误时重定向到的 URL。
`clear`	`true`	`boolean \| Partial<ButtonProps>` 在链接插槽中显示一个按钮以清除错误。 `{ size: 'lg', color: 'primary', variant: 'solid', label: 'Back to home' }`
`ui`		`{ root?: ClassNameValue; statusCode?: ClassNameValue; statusMessage?: ClassNameValue; message?: ClassNameValue; links?: ClassNameValue; }`

插槽

插槽	类型
`默认`	`{}`
`statusCode`	`{}`
`statusMessage`	`{}`
`message`	`{}`
`links`	`{}`

主题

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-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({
      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-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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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-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'
          }
        }
      }
    })
  ]
})

DropdownMenu

一个用于在点击元素时显示操作的菜单。

文件上传

一个用于上传文件的输入元素。

ErrorPRO

页面未找到

页面未找到

页面未找到

Error^PRO