<NuxtErrorBoundary>
El componente <NuxtErrorBoundary> maneja errores del lado del cliente que ocurren en su slot predeterminado.
El <NuxtErrorBoundary>
utiliza el hook onErrorCaptured
de Vue internamente.
Eventos
-
@error
: Evento emitido cuando el slot predeterminado del componente lanza un error.<template> <NuxtErrorBoundary @error="logSomeError"> <!-- ... --> </NuxtErrorBoundary> </template>
Slots
-
#error
: Especifica un contenido alternativo para mostrar en caso de error.<template> <NuxtErrorBoundary> <!-- ... --> <template #error="{ error, clearError }"> <p>Ocurrió un error: {{ error }}</p> <button @click="clearError">Borrar error</button> </template> </NuxtErrorBoundary> </template>
Ejemplos
Accediendo a error
y clearError
en el script
Puedes acceder a las propiedades error
y clearError
dentro del script del componente de la siguiente manera:
<template>
<NuxtErrorBoundary ref="errorBoundary">
<!-- ... -->
</NuxtErrorBoundary>
</template>
<script setup lang="ts">
const errorBoundary = useTemplateRef('errorBoundary')
// errorBoundary.value?.error
// errorBoundary.value?.clearError()
</script>
※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.
La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/components/nuxt-error-boundary