Dart
Dart
HTML Canvas
HTML Canvas
Redis
Redis
Bash
Bash
JavaScript
JavaScript

Vue Masonry Cheat Sheet

Vue.js directive for masonry blocks layout.

Frontend
Vuejs

Install

NPM

npm install vue-masonry --save

Yarn

yarn add vue-masonry

CDN

<script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>

Usage

Vue 3

import { createApp } from 'vue'
import mitt from 'mitt'

import { VueMasonryPlugin } from "vue-masonry/src/masonry-vue3.plugin";

const emitter = mitt()
let app = createApp(App)
app.config.globalProperties.emitter = emitter
app.use(VueMasonryPlugin)
app.mount('#app')

<div v-masonry="containerId" transition-duration="0.3s" item-selector=".item">
  <div v-masonry-tile class="item" v-for="(item, index) in blocks">
    <!-- block item markup -->
  </div>
</div>

Vue 2

import Vue from 'vue'

// import ES6 style
import {VueMasonryPlugin} from 'vue-masonry';

// or using CJS 
// const VueMasonryPlugin = require('vue-masonry').VueMasonryPlugin

Vue.use(VueMasonryPlugin)

&lt;div v-masonry="containerId" transition-duration="0.3s" item-selector=".item"&gt;
    &lt;div v-masonry-tile class="item" v-for="(item, index) in blocks"&gt;
       &lt;!-- block item markup --&gt;
    &lt;/div&gt;
&lt;/div&gt;

Properties

  • item-selector=".item" - list element DOM item selector;
  • transition-duration="0.3s - duration of transitions;
  • column-width="#test" - element selector for column width. Can be a selector string or a number;
  • origin-left="false" - set to group elements to the right instead of left by default;
  • origin-top="false" - set to group elements to the bottom instead of top by default;
  • stamp=".stamp" - specifies which elements are stamped within the layout;
  • gutter=".gutter-block-selector" - specifies [horizontal space between item elements]. Can be a selector string or a number. (https://masonry.desandro.com/options.html#gutter). Set gutter to an Element or Selector String to use the outer width of the element;
  • fit-width="true" - sets the width of the container to fit the available number of columns;
  • horizontal-order="true" - lays out items to (mostly) maintain horizontal left-to-right order;
  • stagger="0.03s" - Staggers item transitions, so items transition incrementally after one another. Set as a CSS time format, '0.03s', or as a number in milliseconds, 30.
  • destroy-delay="0" - Amount of time (in milliseconds) to wait before unloading masonry via masonry.destroy() when the container is destroyed. This is useful during page/route transitions to ensure the layout is consistent while the transition takes place.