`<NuxtErrorBoundary>`

Catches errors in its default slot and renders a fallback without crashing the app.

Since Nuxt 3.0 Spec ↗

Syntax

<NuxtErrorBoundary @error="onError"> ... <template #error /> </NuxtErrorBoundary>

Parameters

Name	Type	Required	Description
`@error`	`(error) => void`	No	Event emitted when a child error is caught.

Returns

Component — Renders #error slot on failure, default slot otherwise.

Examples

<template>
  <NuxtErrorBoundary @error="logError">
    <RiskyWidget />
    <template #error="{ error, clearError }">
      <p>Something went wrong: {{ error.message }}</p>
      <button @click="clearError">Retry</button>
    </template>
  </NuxtErrorBoundary>
</template>

<script setup lang="ts">
function logError(err: unknown) {
  console.error('Widget failed', err)
}
</script>

Notes

Provides component-level (non-fatal) error recovery, unlike the global `error.vue` shown by fatal `createError`. The `#error` slot receives `error` and `clearError` to reset. It only catches errors thrown during client rendering of its slot, not SSR fatal errors.