NuxtJSでnuxt-childを利用してヘッダーなどを共通化する方法

Nuxtではnuxt-childというタグを利用でき、これを利用することでヘッダーの共通化などが実現できます。
公式ではnuxt-childに付いての説明こそありますが、実用的な使い方に付いては説明がなかったため今回説明していきたいと思います。

Nuxtの自動ルーティング機能について

Nuxtでは作成したpagesの構成によって自動的にルーティングの設定が行われます。

例えばpages/hoge.vueというpageを作れば、/hogeというページにアクセスできるようになります。

またpages/hoge/というディレクトリを作成し、その中でpages/hoge/foo.vueやpages/hoge/bar.vueファイルを作成すれば、/hoge/fooページ、/hoge/barページへのルーティングが行われます。

ここでfooページとbarページに、hogeディレクトリ以下の共通ヘッダーを表示したい場合、nuxt-childを利用することで個々のvueファイルに同じhtmlを記述することなく共通化を行うことができます。

ヘッダーの共通化を行う

まず共通ヘッダーを設置する親pageを作成します。

pages/hoge.vue

// pages/hoge.vue
<template>
  <div>
    <h1>This is a Hoge Header.</h1>
    <nuxt-child/>
  </div>
</template>

次に子pageを作成します。

pages/hoge/foo.vue

<template>
  <div>
    <h2>I am the foo page.</h2>
  </div>
</template>

pages/hoge/bar.vue

<template>
  <div>
    <h2>I am the bar page.</h2>
  </div>
</template>

作成したpageは自動ルーティングで作成されたパスにアクセスした際に、親pageに記述した<nuxt-child/>タグ部分に表示されます。

この仕組みを使って、親pageに共通化したい要素を記述することで共通化が実現できます。