<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>
Узнать больше Docs > 3 X > 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>