<NuxtErrorBoundary>

Source
Компонент <NuxtErrorBoundary> обрабатывает клиентские ошибки в своём слоте по умолчанию.
<NuxtErrorBoundary> внутри использует хук Vue onErrorCaptured.

События

  • @error: срабатывает, когда слот по умолчанию выбрасывает ошибку.
    <template>
  <NuxtErrorBoundary @error="logSomeError">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

Слоты

  • #error: контент, показываемый при ошибке (fallback).
    <template>
  <NuxtErrorBoundary>
    <!-- ... -->
    <template #error="{ error, clearError }">
      <p>Ошибка: {{ error }}</p>

      <button @click="clearError">
        Сбросить ошибку
      </button>
    </template>
  </NuxtErrorBoundary>
</template>
Узнать больше Docs > 4 X > Getting Started > Error Handling.

Примеры

Доступ к error и clearError в script

Свойства error и clearError доступны через ref компонента:

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

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

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