NEW ARTICLE
WinSCP 現在のディレクトリをブックマークするショートカットキー
  1. HOME
  2. nuxt.js
  3. Nuxt.js 404エラーページを作成する

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というファイルを作成するだけで可能です。

<template>
 <div class="container">
    <h1>{{ error.statusCode }}</h1> 
    <h1 v-if="error.statusCode === 404">ページが見つかりません</h1>
    <h1 v-else>エラーが発生しました</h1>
    <nuxt-link to="/">ホーム</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
}
</script>

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

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

<template>
  <v-container>
    <v-row>
      <v-col cols="4" offset="4">
        <v-card>
          <v-card-title class="info white--text subheading" primary-title>
            <span class="title">{{ error.statusCode }}</span>
          </v-card-title>
          <v-card-text class="display-1 ma-7 text-center" v-if="error.statusCode === 404">
            ページが見つかりません
          </v-card-text>
          <v-card-actions>
            <v-btn text to="/">Home</v-btn>            
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  props: ['error'],
}
</script>

修正後レイアウト