レイアウト

レイアウトファイルを利用して、ページ全体での共通要素の管理方法を確認していきましょう。

Nuxt.jsでのページの追加方法が確認できたら、次は、レイアウトファイルの使い方をマスタしていきましょう。

レイアウトファイルはページの共通要素を定義するファイルで、ヘッダやフッタなど複数のページで共通に用いられる項目を、一括で管理することができるテンプレートの機能を持ちます。

# レイアウトファイルの利用

Nuxt.jsのプロジェクトでは、レイアウトファイルを利用して、 Webサイトにおけるヘッダやフッタなど複数のページで共通に用いられる要素をまとめて管理することが出来ます。

Nuxt.jsではレイアウトファイルは layout フォルダ内で管理され、デフォルトでは layout/default.vue が利用されます。

先程作成したページの要素のうち、ヘッダとフッタをレイアウトで共通管理するために、 pages/index.vue で記述した nav 要素と footer 要素を、以下のような形で、layout/default.vue に移動してみましょう。

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      ...
    </nav>
    <nuxt/>
    <hr>
    <!-- Footer -->
    <footer>
      ...
    </footer>
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  a {
    color: #212529;
    transition: all 0.2s;
  }

  #mainNav {
    position: absolute;
    border-bottom: 1px solid #e9ecef;
    background-color: white;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  footer {
    padding: 50px 0 65px;
    text-align: center;
  }
</style>

レイアウトファイルもpagesフォルダのファイルと同じく、 vueファイルですので、レイアウトに関するCSSの記述は、まとめて1つのファイルで管理することが出来ます。

レイアウトファイル内には、必ず <nuxt/> 要素を記述します。 pages フォルダ側で記述したテンプレートは、この <nuxt/> 要素の中で展開されます。

レイアウトファイルの変更に合わせて、 page/index.vue と page/about.vue からは、以下のような形で、 nav要素とfooter要素を削除します。

<template>
  <div>
    <!-- Page Header -->
    <header class="masthead" style="background-image: url('https://blackrockdigital.github.io/startbootstrap-clean-blog/img/home-bg.jpg')">
      ...
    </header>

    <!-- Main Content -->
    <div class="container">
      ...
    </div>
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  ...
</style>

page/index.vue や page/about.vue からnavやfooterを削除しても、画面上に正しくヘッダとフッタが表示されているのが確認できるでしょう。

このような形でレイアウトファイルはページの共通要素をまとめて管理するファイルとして、複数ページのWeb制作で幅広く活用することが出来ます。

# カスタムレイアウトの活用

カスタムのレイアウトを利用して、特定のページでのみ別のレイアウトを適用することも可能です。

layout/toppage.vue を作成して以下のような、フッターのないレイアウトファイルを作成してみましょう。

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      ...
    </nav>
    <nuxt/>
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  a {
    color: #212529;
    transition: all 0.2s;
  }

  #mainNav {
    position: absolute;
    border-bottom: 1px solid #e9ecef;
    background-color: white;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  footer {
    padding: 50px 0 65px;
    text-align: center;
  }
</style>

例えば、トップページでフッターを非表示にしたい場合、以下のように pages/index.vue のscriptセクションでレイアウトのファイル名を記述して、利用するレイアウトファイルを指定する事ができます。

<template>
  <div>
    ...
  </div>
</template>

<script>
  export default {
    layout: "toppage"
  }
</script>

<style>
  ...
</style>

# Check!

次のステップに進む前に以下の内容をもう一度確認しておきましょう。

layout/default.vue に追記した内容が、ページ全体に適用されることを確認してみましょう。
vueコンポーネントでlayoutを指定して、 layout/default.vue 以外のレイアウトファイルが利用可能であることを確認してみましょう。

← vue ファイルとページの作成 SPA のページ遷移 →