Error

NuxtError 지원을 사용하는 미리 빌드된 오류 구성 요소입니다.A pre-built error component with NuxtError support.

Usage

Error 구성요소는 [Header](/docs/components/headerxph05x 구성요소와 함께 작동하는 <main> 요소를 렌더링하여 뷰포트의 사용 가능한 높이까지 확장되는 전체 높이 레이아웃을 만듭니다.

Error 구성 요소는 --ui-header-height CSS 변수를 사용하여 Header 아래에 정확하게 위치합니다.

Error 오류

error prop을 사용하여 오류 메시지를 표시합니다.

대부분의 경우 error.vue 파일에서 error prop을 받게 됩니다.

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>

Icon: badge{label="4.8+" class="align-text-top"}

icon prop을 사용하여 상태 코드 위에 아이콘을 표시합니다.

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 Prop을 사용하여 지우기 버튼을 사용자 정의하거나 숨깁니다(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 소품을 사용하여 사용자를 다른 페이지로 리디렉션합니다. 기본값은 /입니다.

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>

examples 예제

x`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>

당신은 당신의 app.vue의 코드를 당신의 error.vue 파일 안에 복제하고 싶을 수도 있습니다, 여기에 예를 들어: https://github.com/nuxt/ui/blob/v4/docs/app/error.vue

Nuxt documentation에서 오류를 처리하는 방법에 대한 자세한 내용을 읽을 수 있지만 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 (### 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'
          }
        }
      }
    })
  ]
})

변경 로그

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.