【Nuxt.js】カスタムレイアウトを使ってトップページだけヘッダーを表示しないようにする

このブログは Nuxt.js を使って作ったが、今回少しリファクタリングをした。

その際、レイアウトについて学習したのでまとめておく。

共通コンポーネントの利用

ヘッダーやフッターのような全ページで使うコンポーネントの場合、default.vue から読み込むことで全ページに適用する。

<!-- /layouts/default.vue -->
<template>
  <div>
    <NavMenu />
    <nuxt />
  </div>
</template>

<script>
  import Navbar from '~/components/NavMenu'
  export default {
    components: {
      NavMenu,
    },
  }
</script>

トップページだけヘッダーを適用したくない

基本的には全ページにヘッダーを表示したいが、トップページだけはシンプルにしたくてヘッダーを無しにしたかった。

その場合、どうするのが正しいのか。

変更前

default.vue でヘッダーコンポーネントを読み込むと、トップページにも適用されてしまう。

そのため仕方なくトップページ以外の全てのページ、具体的には pages 下の index.vue 以外の全てのファイルで、上記のようなコンポーネント読み込みを記述をしていた。

しかしこれでは同じ記述が多くの箇所に散らばっているし、新しくページを追加するたびにヘッダーコンポーネントの読み込みを記述する必要があり面倒だ。

変更後

トップページだけヘッダーを適用したくないのであれば、トップページだけ別のレイアウトファイルを適用してやれば良い。

まず layouts 下に default.vue 以外のファイルを作成する。今回はトップページにだけ別レイアウトを適用したいので、home.vue とした。

<!-- /layouts/home.vue -->
<template>
  <div>
    <NavMenu />
    <nuxt />
  </div>
</template>

<script>
  import NavMenu from '~/components/NavMenu'
  export default {
    components: {
      NavMenu,
    },
  }
</script>

この home.vue をトップページではレイアウトファイルとして指定する。

<!-- /pages/index.vue -->
export default {
  layout: 'home'
}

後は default.vue でヘッダーコンポーネントの読み込みをすれば OK。

<!-- /layouts/default.vue -->
<template>
  <div>
    <NavMenu />
    <BlogHeader />
    <nuxt />
  </div>
</template>

<script>
  import NavMenu from '~/components/NavMenu'
  import BlogHeader from '~/components/BlogHeader'
  export default {
    components: {
      NavMenu,
      BlogHeader,
    },
  }
</script>

layout 指定があるトップページでは home.vue が使われ、layout 指定のないその他のページでは default.vue が使われる。

これによりヘッダーコンポーネントの読み込みは default.vue の 1 箇所だけになり、かつトップページだけレイアウトが違うことが分かりやすくなった。

© 2022 fu9da