Nuxt3 + Vuetify3 でエラーページ作ってみる

はじめに

Webアプリを作成して忘れてはいけないものは・・・・
出てはいけないですがエラーのフォローです。
Nuxtのオリジナルもかっこいいですが、やはりカスタマイズしたいところです。

どんなの作ったの

とりあえず完成形は こちら です。

Nuxt2からNuxt3へ

Nuxt2の時はlayout/error.vueを作成することでできてましたが、Nuxt3では/error.vueに移動したみたいです。

公式 Nuxt2の場合 ⇨ 公式 Nuxt3の場合

シンプルに昔作ったソースを移植すると・・・
layoutが使用できなくなってる・・・
どうやら、Nuxt3からはerror.vueで
定義済みのlayout使用できないみたいです。

/error.vueを新規作成

ステータスーコードとメッセージは以下で取得できる模様

/error.vue

<script lang="ts" setup>
interface Props {
  error: Error;
}
const props = defineProps<Props>();
</script>

<template>
    <div>
        <div>ステータスコード:{{ props.error.statusCode }} </div>
        <div>メッセージ:{{ props.error }} </div>
    </div>
</template>

layoutは利用できないっぽいので、移植してきて・・・
（詳細はソース参照ください）

👏動いた！