【Nuxt.js】vue-masonryを使用して要素をタイル状に表示する

ハコザキです。

今回は画像などの要素をタイル状に並べることができる「vue-masonry」を
Nuxt.jsプロジェクトに導入する方法をご紹介します！

↓こんな感じのレイアウトです

今回は既にNuxt.jsプロジェクトが作られていることを前提とします！

作り方はこちらでわかりやすくまとめられてます…！

導入

下記コマンドでプロジェクトにインストール

$ npm install vue-masonry --save
or
$ yarn add vue-masonry

プロジェクト内で使用できるように有効化

plugins/vue-masonry.jsに下記を記述

import Vue from 'vue'
import { VueMasonryPlugin } from 'vue-masonry'

Vue.use(VueMasonryPlugin)

nuxt.config.jsに下記を記述

plugins: [
  { src: '~/plugins/vue-masonry', ssr: false },
],

導入は以上です！

使い方

templateタグ内

タイル表示したい要素にv-masonry-tile をつけ、要素の親にv-masonry をつけます。
親要素にitem-selector をつけ、子要素のクラス名を指定するのを忘れないようにしてください！

<main id="topMain" class="main">
  <no-ssr>
    <div
      v-masonry="'containerId'"
      transition-duration="0.3s"
      item-selector=".item"
      class="masonryWrap"
    >
      <div
        v-for="(item, index) in photoList"
        :key="index"
        v-masonry-tile
        class="masonryWrap_item item"
      >
        <img :src="item.src" width="100%" :alt="item.label" />
      </div>
    </div>
  </no-ssr>
</main>

styleタグ内

.main {
  width: 100%;
}
.masonryWrap {
  margin: auto;
  width: 90%;
}
.item {
  width: 100%;
  margin: 0 0 8px 0;
}
.item img {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .item {
    width: calc(100% / 3 - 32px);
    margin: 10px;
  }
}
@media screen and (min-width: 1440px) {
  .item {
    width: calc(100% / 4 - 32px);
  }
}

scriptタグ内

no-ssrコンポーネントを利用して部分的にSSRしないように設定します。
※こちらはデフォルトで登録されているコンポーネントなのでインストールする必要はありません。

import NoSSR from 'vue-no-ssr'
export default {
  components: {
    'no-ssr': NoSSR
  },
  data() {
    return {
      photoList: [
        {
          label: 'test1',
          src: 'https://placehold.jp/150x150.png'
        },
        {
          label: 'test2',
          src: 'https://placehold.jp/150x300.png'
        },
        {
          label: 'test3',
          src: 'https://placehold.jp/150x150.png'
        },
        {
          label: 'test4',
          src: 'https://placehold.jp/150x300.png'
        },
        {
          label: 'test5',
          src: 'https://placehold.jp/350x150.png'
        },
        {
          label: 'test6',
          src: 'https://placehold.jp/150x600.png'
        }
      ]
    }
  },
  // ページ読み込み時にタイル状に表示させる
  mounted() {
    if (this.$redrawVueMasonry === 'function') {
      this.$redrawVueMasonry()
    }
  }
}