v3
Nuxt on GitHub

<NuxtErrorBoundary>

소스
<NuxtErrorBoundary> 컴포넌트는 기본 슬롯에서 발생하는 클라이언트 사이드 오류를 처리합니다.
<NuxtErrorBoundary>는 내부적으로 Vue의 onErrorCaptured 훅을 사용합니다.

이벤트

  • @error: 컴포넌트의 기본 슬롯에서 오류가 발생했을 때 발생하는 이벤트입니다.
    <template>
  <NuxtErrorBoundary @error="logSomeError">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

슬롯

  • #error: 오류가 발생했을 때 표시할 대체 콘텐츠를 지정합니다.
      <template>
    <NuxtErrorBoundary>
      <!-- ... -->
      <template #error="{ error, clearError }">
        <p>오류가 발생했습니다: {{ error }}</p>

        <button @click="clearError">오류 지우기</button>
      </template>
    </NuxtErrorBoundary>
  </template>
Read more in Docs > Getting Started > Error Handling.

예시

스크립트에서 error와 clearError에 접근하기

아래와 같이 컴포넌트의 스크립트 내에서 error와 clearError 속성에 접근할 수 있습니다:

<template>
  <NuxtErrorBoundary ref="errorBoundary">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

<script setup lang="ts">
const errorBoundary = useTemplateRef('errorBoundary')

// errorBoundary.value?.error
// errorBoundary.value?.clearError()
</script>