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