今回はwebサイトの背景に画像を表示する方法についてまとめてみます。まずは、nuxtのビューの構造について、Nuxt.jsの公式ページにある画像をベースに確認していきます。

ビューの構造

レイアウトを決める上で影響するものは、大きく分けると下記の4つあります。

  • アプリケーションテンプレート・・・ベースになるHTML
  • レイアウト・・・レイアウトファイル(layouts/ディレクトリ配下)
  • ページ・・・ページファイル(pages/ディレクトリ配下)
  • nuxt.conf.js・・・設定ファイルによる設定

webサイト全体に画像を表示するには、bodyタグの背景に設定するのでcssは、下記のような形になります。

body.backimage {
  background-image: url("/back.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

bodyにbackimageクラスを付与することで画像を表示できるようなcssを利用してそれぞれのパターンを見ていきます。

共通で設定したい場合

アプリケーションテンプレート

こちらは、ベースになるHTMLです。Nuxt.jsでは、下記のデフォルトのテンプレートが利用されています。プロジェクトのソースフォルダ(デフォルトはプロジェクトのルートディレクトリ)にapp.htmlファイルを作成します。

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

すべて共通で利用する場合は、こちらのHTML自体で画像を表示する方法が一番カンタンです。ただ、テンプレートのHTMLも編集するとこちらもgitなどで管理が必要になります。管理対象をふやさずに対応する方法を紹介します。

設定ファイルで行う方法

nuxt.config.jsに設定する場合は、headに追加します。

  /*
   ** Headers of the page
   */
  head: {
    bodyAttrs: {
      class: 'backimage'
    },
  },

全ページ共通に設定したい場合には、この方法が良いと思います。

個別に対応したい場合

レイアウト

サイドバーを含めたり、モバイルとデスクトップに異なるレイアウトを使用したりするなど Nuxt.js アプリの外観を変更したい場合にレイアウトは非常に役立ちます。複数ページで利用するような共通項目をテンプレートのような形で扱う場合に便利です。下記の例は、bodyタグにbackimageクラスを付与することで、bodyに背景画像を表示しています。

<template>
  <div class="wrapper">
    <div class="content">
      <nuxt />
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class SignLayout extends Vue {
  head () {
    return {
      bodyAttrs: {
        class: 'backimage'
      }
    }
  }
}
</script>
<style scoped lang="scss" >
.wrapper {
  min-height: 100vh;
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
</style>

ページ

ページも方法としては、レイアウトと同じ方法で行いますので、省略します。

おわりに

bodyにクラス属性を付与する4つの方法を確認しました。全体を変更するパターン、個別に対応するパターンのそれぞれを紹介しました。すべてのページで共通で利用する場合は、nuxt.config.jsで行い、個別に行う場合は、レイアウトを作ってやるのがシンプルでわかりやすいと思います。また、javascriptを利用してdocument.body.class等を直接編集することもできますが、今回紹介した方法のいずれかを利用すれば、わざわざjavascriptで直接クラス操作は不要かと思います。実際には、すべて同じレイアウトであるケースはほぼないと思いますので、レイアウトによる方法が一番利用機会が多いと思います。