<NuxtErrorBoundary>

Nuxt provides the <NuxtErrorBoundary> component to handle client-side errors happening in its default slot, using Vue’s onErrorCaptured hook.

Events

  • @error: Event emitted when the default slot of the component throws an error.

    1. <template>
    2. <NuxtErrorBoundary @error="logSomeError">
    3. <!-- ... -->
    4. </NuxtErrorBoundary>
    5. </template>

Slots

  • #error: Specify a fallback content to display in case of error.

    1. <template>
    2. <NuxtErrorBoundary>
    3. <!-- ... -->
    4. <template #error="{ error }">
    5. <p>An error occured: {{ error }}</p>
    6. </template>
    7. </NuxtErrorBoundary>
    8. </template>

👉

Read more in Guide > Features > Error Handling.