mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 07:05:11 +00:00
f26a801775
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
43 lines
1.0 KiB
Markdown
43 lines
1.0 KiB
Markdown
---
|
|
title: "<NuxtErrorBoundary>"
|
|
description: The <NuxtErrorBoundary> component handles client-side errors happening in its default slot.
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-error-boundary.ts
|
|
size: xs
|
|
---
|
|
|
|
::callout
|
|
The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) hook under the hood.
|
|
::
|
|
|
|
## Events
|
|
|
|
- `@error`: Event emitted when the default slot of the component throws an error.
|
|
|
|
```vue
|
|
<template>
|
|
<NuxtErrorBoundary @error="logSomeError">
|
|
<!-- ... -->
|
|
</NuxtErrorBoundary>
|
|
</template>
|
|
```
|
|
|
|
## Slots
|
|
|
|
- `#error`: Specify a fallback content to display in case of error.
|
|
|
|
```vue
|
|
<template>
|
|
<NuxtErrorBoundary>
|
|
<!-- ... -->
|
|
<template #error="{ error }">
|
|
<p>An error occurred: {{ error }}</p>
|
|
</template>
|
|
</NuxtErrorBoundary>
|
|
</template>
|
|
```
|
|
|
|
:read-more{to="/docs/getting-started/error-handling"}
|