Vue.js Directive For Masonry Library

Description:

A Vue.js 2/3 directive for Masonry inspired blocks layouting.

How to use it:

1. Import and register the VueMasonryPlugin.

// Vue 2
import Vue from 'vue'
import {VueMasonryPlugin} from 'vue-masonry';
// register
Vue.use(VueMasonryPlugin);
// 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')

2. Use the Masonry directive in your 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>

3. All available attributes.

'column-width': 'columnWidth',
'transition-duration': 'transitionDuration',
'item-selector': 'itemSelector',
'origin-left': 'originLeft',
'origin-top': 'originTop',
'fit-width': 'fitWidth',
'stamp': 'stamp',
'gutter': 'gutter',
'percent-position': 'percentPosition',
'horizontal-order': 'horizontalOrder',
'stagger': 'stagger',
'destroy-delay': 'destroyDelay'

Preview:

Vue.js Directive For Masonry Library

Changelog:

v0.14.0 (11/29/2021)

  • added support for Vue3/Vue2 using vue-demi
  • added typescript declaration file

v0.12.0 (12/28/2020)

  • Updated

Download Details:

Author: shershen08

Live Demo: https://shershen08.github.io/vue-plugins-demo-static/index.html#/masonry

Download Link: https://github.com/shershen08/vue-masonry/archive/master.zip

Official Website: https://github.com/shershen08/vue-masonry

Install & Download:

You Might Be Interested In:

Add Comment