gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
68 lines
1.5 KiB
Markdown
68 lines
1.5 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.vue
|
|
size: xs
|
|
---
|
|
|
|
::tip
|
|
The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle#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, clearError }">
|
|
<p>An error occurred: {{ error }}</p>
|
|
|
|
<button @click="clearError">
|
|
Clear error
|
|
</button>
|
|
</template>
|
|
</NuxtErrorBoundary>
|
|
</template>
|
|
```
|
|
|
|
:read-more{to="/docs/4.x/getting-started/error-handling"}
|
|
|
|
## Examples
|
|
|
|
### Accessing `error` and `clearError` in script
|
|
|
|
You can access `error` and `clearError` properties within the component's script as below:
|
|
|
|
```vue
|
|
<template>
|
|
<NuxtErrorBoundary ref="errorBoundary">
|
|
<!-- ... -->
|
|
</NuxtErrorBoundary>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const errorBoundary = useTemplateRef('errorBoundary')
|
|
|
|
// errorBoundary.value?.error
|
|
// errorBoundary.value?.clearError()
|
|
</script>
|
|
```
|