Nuxt.jsで共通部分を分割する

Nuxt.jsでヘッダーやフッターなどの共通部分を分割する方法をメモ。

サンプルコード

pages/index.vueは以下のような状態です。

<template>
  <h1>Hello world</h1>
</template>

まずはデフォルトのレイアウトを設定してみます。
layoutsフォルダにdefault.vueを追加します。

<template>
  <div class="l-wrapper">
    <header class="l-header">
      <p class="logo">サイト名</p>
    </header>
    <Nuxt />
  </div>
</template>

6行目に各ページの内容が入ります。
ブラウザで確認すると、以下のような構造になりました。

<div class="l-wrapper">
  <header class="l-header">
    <p class="logo">サイト名</p>
  </header>
  <h1>Hello world</h1>
</div>

先ほどはデフォルトのレイアウトにヘッダーも追加しましたが、ヘッダーをコンポーネントとして別で管理するようにしてみます。
componentsフォルダにHeader.vueを追加します。

<template>
  <header class="l-header">
    <p class="logo">サイト名</p>
  </header>
</template>

コンポーネントを自動でインポートできるように、nuxt.config.jsに記述を追加します。

export default {
  components: true
}

layouts/default.vueでHeader.vueを読み込みます。

<template>
  <div class="l-wrapper">
    <Header />
    <Nuxt />
  </div>
</template>

これで最終的な構造は最初の例と同じ状態になりました。

<div class="l-wrapper">
  <header class="l-header">
    <p class="logo">サイト名</p>
  </header>
  <h1>Hello world</h1>
</div>

先ほどの例ではデフォルトのレイアウトを使用しましたが、一部のページだけ別のレイアウトを使用することもできます。
layouts/blog.vueを作成してみます。

<template>
  <div class="l-wrapper">
    <p>ブログです。</p>
    <Nuxt />
  </div>
</template>

このレイアウトをpages/index.vueで使ってみます。

<template>
  <h1>Hello world</h1>
</template>

<script>
export default {
  layout: 'blog'
}
</script>

7行目で使用するレイアウトを指定しています。
これで指定したページのみレイアウトを変更することができました。

<div class="l-wrapper">
  <p>ブログです。</p>
  <h1>Hello world</h1>
</div>