NuxtJSでテンプレートの切り替えとレイアウト

この記事は 約3 分で読めます。

最近VueJSのフレームワークNuxtJSにハマってます。
JAMStac全般のフレームワークを触っています。

と言うのもWPの速度の重さが気になって仕方なく面倒臭いと思うので、これはユーザーも同じ考えであって読み込みが遅いサイトを何ページもめくって読む気がしない。

Amazonもページの表示速度が0.2秒遅くなっただけで売上が8％も落ちると報告しています。

今日はNuxtJSを触っていてブログを作ろうと思ったのでテンプレートの組み立てから学習した事をまとめます。

NuxtJSのレイアウトテンプレート

公式ページのViewページにテンプレートのレイアウトについて記載されています。

基本はプロジェクトのルートフォルダにapp.htmlのファイルを生成して記述すればデフォルトで適用されるとのこと。内容は以下の通り。


<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

今回触るのは上記の場所ではなく、通常のテンプレート編集は

Root > layout > default.vue

上記のファイルを編集すれば即座にレイアウトテンプレートとして反映されます。

また、カテゴリページやシングルカラムページとして別のレイアウトを使いたい時は

それぞれのページファイルで個別に対応出来ます。


<template>
	<div class="container">
		<h2>レイアウト変更</h2>
	</div>
</template>

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

page > index.vue 上記の例のように変更したいテンプレートのファイル名(.vue拡張子は省略)をscriptタグのエリアで設定することで柔軟に対応出来ます。