Nuxt.jsの「layouts」を使用してレイアウトの共通化を行う方法｜Nuxt.jsの基本

Nuxt.jsにはぺーじごとにレイアウトを切り替える機能があります。

元から存在するのは「layouts/default.vue」だけですが、「layouts」フォルダ内にレイアウト用のファイルを作成し、「pages」配下の各ページファイルからレイアウトを指定して使います。

この機能をうまく使うことで、複数ページで共通使用するレイアウトをまとめて管理できます。

レイアウトの作成

default.vue

まずデフォルトで設定されている「layouts/default.vue」の中身は下記のようになっています。

<template>
  <div>
    <Nuxt />
  </div>
</template>

この<Nuxt />タグの中にpages配下のコードが入ります。

これをコピーして、レイアウト共有の処理やコードを追加していきます。
基本的にはpagesと同じようにNuxt.jsの処理も普通に書けます。

レイアウトの適用方法

レイアウトを適用したいときは、「pages」配下のファイルのexport default直下のlayoutでファイル名を指定します。

例えば「layouts/list.vue」を適用したい場合は「layout: 'list'」と指定します。

<script>
export default {
  layout: 'list', // ← 「list.vue」が適用される
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

error.vue

「layouts/error.vue」を作成すると、全ページ共通のエラーページを設定できます。
このエラーページではデフォルトで「error」propsが渡されて、その中に「statusCode」というHTTPステータスコードを表す値（404や500など）を持っています。

この値を使えば、どのステータスコードなのかによってメッセージを切り替えたりもできます。

<template>
  <div class="page is-error">
    <h1>{{ error.statusCode }}</h1>
    <h2>エラーが発生しました</h2>
  </div>
</template>

<script>
export default {
  props: {
    error: { type: Object, default () { return {} } }
  }
}
</script>