Nuxt3で404ページをカスタマイズする

Nuxt3で404エラーのページをカスタマイズするには、app.vueと同じ階層（ルートフォルダ）にerror.vueを作成します。エラーメッセージはuseError()関数で取得できるため、それを元に思い通りのページを作ることができます。

以下は上記画像のサンプルコードです。

<script setup lang="ts">
const error = useError();
</script>

<template>
  <div class="container">
    <div class="stack">
      <h1>404</h1>
      <p class="error-message">{{ error?.message }}</p>
    </div>
  </div>
</template>

<style scoped>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 6rem;
  letter-spacing: 0.5rem;
  text-align: center;
  line-height: 1;
  color: pink;
}
.error-message {
  font-weight: lighter;
}
</style>

Nuxt3の404ページについて調べると、/pages/404.vueを作成する方法が出てきますが、単純にhttp://example.com/404/のページが出力されるだけでカスタマイズすることはできません。

今後もerror.vueを扱う形になると思いますが、仕様変更の可能性もあるので、Nuxt3のエラーの扱い方も定期的にチェックしておくといいかもしれません。また、動的ルーティングで404エラーを表示する方法も別記事でご紹介しています。