nuxt.jsでヘッダー・フッターファイルを分割する方法レイアウトの基本

今回の記事は、ゆるWeb勉強会@札幌のアドベントカレンダーの2日目の記事になります。

nuxt.jsでヘッダー・フッターなど分割する方法をご紹介します。

ファイルを分割することにより、毎回ヘッダー・フッターを書かなくて良くなりますし
修正が発生しても1ファイルを修正するだけで良いので、なにかと便利になります。

分割ブロック

- ベース
　- ヘッダー
　　- ヘッダーナビ
　- フッター

まずは分割ブロックです。
今回はこんな感じブロック毎に分割していこうと思います。

ファイル構成

/components
- header.vue
- HeaderNav.vue
- footer.vue
/layouts
- default.vue
/pages
- link01.vue
- link02.vue
- link03.vue
- link04.vue

/pagesの直下は適宜変更して大丈夫です。

default.vue


<template>
	<div>
		<Header /> // header出力位置
		<main>
			<nuxt />
		</main>
		<Footer /> //footer出力位置
	</div>
</template>
<script>
	import Header from "@/components/header.vue"; // headerをインポート
	import Footer from "@/components/footer.vue"; // footerをインポート
	export default {
		components: {
			Header,
			Footer
		}
	};
</script>
<style lang="scss" scoped>
	main {
		min-height: 600px;
		background-color: #ddd;
		text-align: center;
		padding: 30px;
	}
	.page-enter-active,
	.page-leave-active {
		transition: 0.5s cubic-bezier(1, 0.25, 0.25, 1);
	}
	.page-enter,
	.page-leave-active {
		opacity: 0;
		transform: translate(0, 30px);
	}
</style>

layoutフォルダの直下にdefault.vueというファイル名を作成すると、自動で全ページのベースとなります。
そのためまずは、default.vueを作成し、大枠を整えるのが良いかと思います。

そして、default.vueから/component/header.vue、/component/footer.vueをインポートし、表示させます。

default.vueでないvueをベースにしたい場合

ちなみに、ページによって他のdefault.vueで表示したい場合は、
/layout/defaultdefault02.vueを作成し、下記のように記述すると
ページによってdefaultを使い分けることができます。


		<script>
			export default {
				layout: 'default02', // ←ここを追加
			};
		</script>

header.vue

グローバルナビゲーション（/component/headerNav.vue）は、header.vueでインポートして読み込ませています。

<template>
	<div>
		<header>
			<h1>header</h1>
			<HeaderNav />
		</header>
	</div>
</template>
<script>
	import HeaderNav from "@/components/headerNav.vue";
	export default {
		components: {
			HeaderNav
		}
	};
</script>
<style lang="scss" scoped>
header {
	color: #fff;
	padding: 20px;
	background-color: #527b8e;
}
</style>

headerNav.vue

<template>
	<div>
		<nav>
			<ul>
				<li>
					<nuxt-link to="/link01">リンク1</nuxt-link>
				</li>
				<li>
					<nuxt-link to="/link02">リンク2</nuxt-link>
				</li>
				<li>
					<nuxt-link to="/link03">リンク3</nuxt-link>
				</li>
				<li>
					<nuxt-link to="/link04">リンク4</nuxt-link>
				</li>
			</ul>
		</nav>
	</div>
</template>
<script>
	export default {
		components: {}
	};
</script>
<style lang="scss" scoped>
nav {
	color: #fff;
	ul {
		display: flex;
		justify-content: flex-end;
		li {
			list-style-type: none;
			margin-left: 15px;
			a {
				color: #fff;
			}
		}
	}
}
</style>

とりあえずですが、リンクが横並びで４つおいてます。

ちなみにですが、横並びはFlexboxを使うのをオススメします。
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

↑１番わかりやすいFlexboxの解説記事です。
僕もたまに見ながら、実装してます。

footer.vue

<template>
	<div>
		<footer>footer</footer>
	</div>
</template>
<script>
	export default {};
</script>
<style lang="scss" scoped>
footer {
	color: #fff;
	padding: 20px;
	background-color: #2b4257;
	font-size: 30px;
	font-weight: bold;
}
</style>

最後にフッターです。

今回はシンプルですが、フッターナビゲーションなどを配置することもあるとかと思いますが
その場合は/component/footernav.vueを作成し、インポートすると良いでしょう。