エラーを発生させる

createError()

エラーオブジェクトをthrowする

pages/index.vue

<template>
  <h1>TOP</h1>
  <nav id="breadcrumbs">
    <ul>
      <li>TOP</li>
    </ul>
  </nav>
  <section>
    <p>
      <!-- <NuxtLink to="/character/characterList"> -->
      <NuxtLink v-bind:to="{name: 'character-characterList'}">
        キャラクターの設定はこちらから
      </NuxtLink>
    </p>
  </section>
  <section>
    <p>
      <NuxtLink v-bind:to="{name: 'errorHandlerBasic'}">
        ルフィvsクロコダイル
      </NuxtLink>
    </p>
  </section>
</template>

pages/errorHandlerBasic.vue

<template>
  <ErrorGeneratorBasic/>
  <p>
    <NuxtLink v-bind:to="{name: 'index'}">
      戻る
    </NuxtLink>
  </p>
</template>

components/ErrorGeneratorBasic.vue

<script setup lang="ts">
const onThrowsErrorClick = (): void => {
  throw createError("ルフィが負けた(エラー発生)");
};
</script>

<template>
  <section>
    ルフィvsクロコダイル <button v-on:click="onThrowsErrorClick">結果</button>
  </section>
</template>

エラー時の表示をする

NuxtErrorBoundaryタグ

slotの仕組みを利用する

pages/errorHandlerBasic.vue

<template>
  <NuxtErrorBoundary>
    <ErrorGeneratorBasic/>
    <template v-slot:error="errorProps">
      <p>対戦した結果</p>
      <p>{{errorProps.error}}</p>
    </template>
  </NuxtErrorBoundary>
  <p>
    <NuxtLink v-bind:to="{name: 'index'}">
      戻る
    </NuxtLink>
  </p>
</template>