【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/index.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箇所だけになり、かつトップページだけレイアウトが違うことが分かりやすくなった。