feat: 위키 저장소 초기 커밋
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
67
reference/4.api/1.components/6.nuxt-error-boundary.md
Normal file
67
reference/4.api/1.components/6.nuxt-error-boundary.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
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>
|
||||
```
|
||||
Reference in New Issue
Block a user