なんだかNuxtが楽しくなってきました。今回はNuxtでテンプレートページを作成する方法です。

テンプレートとは

例えば各ページで同じヘッダーを使用したいとき、毎回各ページにヘッダーを書いていては非効率だし、修正があったときに更新忘れが起こる可能性があって実用的ではないです。

Nuxtではあらかじめコンポーネントとして作成したヘッダーやフッターを、layoutsフォルダのファイルに呼び出すことでテンプレートが出来上がり、各ページで好きなテンプレートを呼び出すことができます。

テンプレートページ作成手順

1. ヘッダーやフッターを作成する
2. layouts配下にテンプレートファイルを作成する
3. ページごとにテンプレートを呼び出す

実際に見ていきましょう。

ヘッダーやフッターを作成する

今回は一旦headerのみ作成します。

componentsディレクトリ配下にSimpleHeader.vueのファイルを作成して下記のように作成しました。

<template>
  <div class="header">
    <h1>header</h1>
  </div>
</template>

必要最低限だけ書きました。必要に応じて追加してください。

layouts配下にテンプレートファイルを作成する

テンプレートとなるファイルを作成して、先ほどのヘッダーを読み込ませます。

layoutsディレクトリ配下にdefault.vueを下記のように作成しました。

<template>
  <div>
    <simple-header />
    <nuxt />
  </div>
</template>

<script>
import SimpleHeader from '~/components/SimpleHeader.vue'

export default {
  name: 'default',
  components: {
    SimpleHeader
  }
}
</script>

8行目のscriptタグ内でcomponentsで作成したヘッダーのファイルを、『SimpleHeader』という名前で呼び出して13行目で使えるようにしたので、3行目のtemplateタグの中で<simple-header />というタグでヘッダーを追加できるようになりました。

ちなみにタグに関しては<SimpleHeader />でも使用できますが、Nuxtではケバブケース（ハイフンで単語を繋ぐ形式）でタグを書くのが一般的なようです。

また、export defaultでこのテンプレートファイルを『default』という名前で外出させることを許可しました。他のファイルからこのテンプレートを呼び出すときは、このnameで定義した名前を呼んであげますよ。

ページごとにテンプレートを呼び出す

テンプレートが作成できたのでこれを各ページで読み込ませればOKです。
今回はTOPページにテンプレートを適用させてみましょう。

pagesディレクトリ直下のindex.vueのscriptタグ内に下記を追加しました。

<template>
  <div class="container">
    <!-- TOPページのコンテンツ -->
  </div>
</template>

<script>
export default {
  layout: 'default',
  ...
}
</script>

9行目の一文を追加するだけです。

ポイントはlayouts/default.vueでexportした名前を呼び出している点です。これが合わないと『そんなのないよ！』って怒られます（怒られました）。

これでTOPページにアクセスしてみると上部でシンプルな大見出しでheaderと書かれていることに気づくでしょう。

参考サイト

Vue.js/Nuxt.jsで画面レイアウト
こちらは最後にheadの設定もあって分かりやすかったです！感謝！