Nuxt.js 404エラーページを作成する

Nuxt.js 404エラーページを作成する

Nuxt.jsで存在しないURLにアクセスが会った場合に、エラーメッセージを表示する方法です。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

エラーページ作成

layouts配下に下記の内容で、error.vueというファイルを作成するだけで可能です。

ブラウザより存在しないURLにアクセスすると下記の画面が表示されるようになります。

vuetifyを利用して少しだけレイアウトを修正

修正後レイアウト