[Nuxt] エラーページの作り方

layouts/error.vue

layouts/error.vue を作成するだけで、存在しないURLにアクセスされた場合は自動的にこのページが表示される。

それ以外にロジックを書く必要はない。

Netifyにデプロイする場合は注意

上記layouts/error.vueは、
200.html
で出力される。しかし Netify では存在しないページへのアクセスは
404.html
となるため、意図した動作にならない。

nuxt.config.jsを調整する

nuxt.config.js

export default {
...
  generate: {
    fallback: 'true',
  }
}

と書いておくとエラーページは404.htmlで出力されるので、Netlifyであっても意図通りデプロイされる。