<NuxtErrorBoundary>

ソース
<NuxtErrorBoundary> コンポーネントは、デフォルトスロットで発生するクライアントサイドのエラーを処理します。
<NuxtErrorBoundary> は Vue のonErrorCapturedフックを内部で使用しています。

イベント

  • @error: コンポーネントのデフォルトスロットがエラーをスローしたときに発行されるイベント。
    <template>
  <NuxtErrorBoundary @error="logSomeError">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

スロット

  • #error: エラー発生時に表示するフォールバックコンテンツを指定します。
    <template>
  <NuxtErrorBoundary>
    <!-- ... -->
    <template #error="{ error, clearError }">
      <p>An error occurred: {{ error }}</p>

      <button @click="clearError">
        Clear error
      </button>
    </template>
  </NuxtErrorBoundary>
</template>
Docs > 4 X > Getting Started > Error Handling で詳細をご覧ください。

例

スクリプトで error と clearError にアクセスする

コンポーネントのスクリプト内で、以下のように error と clearError プロパティにアクセスできます。

<template>
  <NuxtErrorBoundary ref="errorBoundary">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

<script setup lang="ts">
const errorBoundary = useTemplateRef('errorBoundary')

// errorBoundary.value?.error
// errorBoundary.value?.clearError()
</script>