Vue.js/Nuxt.jsで画面レイアウト

ヘッダやフッタを全ページ書くのは面倒だし変更するのにも手間がかかるのでレイアウトを作りましょう。
手順は
①componentsにヘッダやフッタの共通テンプレートを作成。
②layoutsにレイアウトテンプレート作成。
③pagesのページファイルでレイアウトテンプレートを呼び出す。
ページ毎にレイアウトファイルを選択できて便利ですね。

ヘッダ、フッタのテンプレート

components/SampleHeader.vue

components/SampleFooter.vue

レイアウトテンプレート作成

ヘッダ&フッタのテンプレートをインポートし対応するタグを設定。
タグにページコンテンツが挿入される。

layouts/sample.vue

ページ作成

使用するレイアウトファイルを指定。

pages/index.vue

metaタグの設定

nuxt-config.jsに基本情報が設定されているが各ページで上書きが可能。

pages/index.vue

※タイトルについてはテンプレート設定ができるのね。
 %sに各ページのtitleが入るよ。

nuxt-config.js

シェアする

  • このエントリーをはてなブックマークに追加

フォローする