広告

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

JavaScript WEBシステム開発

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

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

components/SampleHeader.vue

<template>
  <div class="header">
    <h1>Nuxt.js Sample!</h1>
    <ul class="menu">
      <li>メニュー</li>
    </ul>
  </div>
</template>

<style>
.menu {
  list-style: none;
  padding: 0;
  background-color: #EEE;
}
.menu li {
  display: inline-block;
  padding: 5px;
}
</style>

components/SampleFooter.vue

<template>
  <div class="footer">
    サンプルフッタ
  </div>
</template>

<style>
.footer {
  background-color: #DDD;
}
</style>

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

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

layouts/sample.vue

<template>
  <div>
    <ex-header />
    <nuxt />
    <ex-footer />
  </div>
</template>

<script>
// ヘッダ＆フッタをインポート
import ExHeader from '~/components/SampleHeader.vue'
import ExFooter from '~/components/SampleFooter.vue'

export default {
  name: 'sample',	// テンプレート名
  components: {
    ExHeader,		// <ex-header>に対応
    ExFooter		// <ex-footer>に対応
  }
}
</script>

ページ作成

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

pages/index.vue

<template>
  <section class="container">
    <h2>トップ</h2>
    <div></div>
  </section>
</template>

<script>
export default {
  layout: 'sample',		// レイアウトファイルを指定
  head: {
    title: 'TOP',
    meta: [
      {
        hid: 'description', name: 'description', content: 'トップページです。'
      }
    ]
  },
}
</script>

<style>
</style>

metaタグの設定

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

pages/index.vue

<script>
export default {
  layout: 'sample',
  head: {
    // title上書き
    title: 'TOP',
    meta: [
      {
        // description上書き
        hid: 'description', name: 'description', content: 'トップページです。'
      }
    ]
  },
}
</script>

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

nuxt-config.js

  head: {
    titleTemplate: '%s | nuxt-sample',
    ・・・
  },