Nuxt.jsの動的ルーティングの際の404ページについて

Question

環境
Vue.js + Nuxt.js
Contentful
Netlify

解決したい問題
JamStackなブログで動的ルーティングをした際、用意をしていないページにアクセスした際に404ページを表示したい。

ディレクトリ構成

layout/
　├ default.vue
　└ error.vue //TOP
pages/
　├ index.vue //TOP
　├ _category.vue //カテゴリページ index/_category
　└ _blog/
　　　└ _slug.vue //記事ページ index/category/_slug

現状
この構成の場合、index/hogeにアクセスした際、用意していない場合であっても_category.vueの内容が表示されてしまいます。
また、index/hoge/hogeにアクセスした際にもlayoutに用意したエラーページが表示されず何もない状態になってしまいます。

解決案

layout/
　├ default.vue
　└ error.vue //TOP
pages/
　├ index.vue //TOP
　├ category1.vue //カテゴリ1ページ index/category1
　├ category2.vue //カテゴリ2ページ index/category2
　├ category3.vue //カテゴリ3ページ index/category3
　└ _blog/
     ├ index.vue //カテゴリエラーページ index/hoge
　　　└ _slug.vue //記事ページ index/category/_slug

存在しないカテゴリーページ(index/hoge)にアクセスした際にエラーページが表示されない問題を解決する案として、上記のように用意しているカテゴリーのページをそれぞれ用意しておくことで対応はできるのですが、この方法が良いものと言えるのかわかりません。

何か良い方法があれば教えていただきたいです。

Answer 1

   generate: {
    fallback: true,
    async routes() {
     ...
    }
  },

nuxt.config.jsのfallbackをtrueにしてerror.vueで基本的には返して、それ以外のエラーではなく、

コンテンツがないって状態ならメッセージでまだないって書いたほうがいい気がする

jsonのデータが空　=> 「この記事はまだ作成されてません」みたいな感じでv-if、v-showとかで実装するイメージ