Nuxt3の動的ルーティングで404エラーを表示する

Nuxt3では、存在しないページにアクセスされた時に自動的に404ページを表示してくれますが、動的ルーティング（例：/pages/[postId].vue）の場合は、存在しないページがあったとしても404エラーになりません。

実際のページでは、コンソールにエラーが表示されるものの、データが取得できないものとして処理が進むため、動的に取得したタイトルや本文を表示する場合は、真っ白な画面が表示されます。これはErrorオブジェクトやNuxt3のcreateError()をそのまま投げた場合でも同じです。

この問題を回避するには、createError()のオプションfatalにtrueをセットします。（デフォルト値はfalse）

以下はサンプルコードです。

<script lang="ts" setup>
import type { IBlogPost } from "~/queries/types";
import query from "~/queries/post.gql";

const route = useRoute();
const { data } = await useAsyncQuery<IBlogPost>(query, {
  postId: route.params.postId,
});

if (!data.value) {
  throw createError({
    statusCode: 404,
    message: "お探しの記事が見つかりませんでした",
    fatal: true,
  });
}
</script>

Nuxt3で404ページをカスタマイズする方法も併せてご覧ください。