【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()
}
}
}実際の動き
上記のソースを1ファイルにまとめて記述し動作確認すると下記のような表示・動作になると思います！
画面幅を変えてもタイル状に綺麗に並べてくれてます…！！
親要素にtransition-duration="0.3s" のようなプロパティを記載することでカスタマイズも可能です。
ちなみにtransition-duration は要素が移動する時間です。長ければ長いほどゆっくり移動します
transition-duration="0.1s"
transition-duration="2s"
他のプロパティの説明はこちらに記載されてますので興味のある方はご覧ください！