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:
Changelog:
v0.16.0 (07/07/2022)
- update
v0.14.1 (02/07/2022)
- fixed Error Events.emit is not a function for usage in Vue 2
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://jsfiddle.net/shershen08/n54039qg/
Download Link: https://github.com/shershen08/vue-masonry/archive/master.zip
Official Website: https://github.com/shershen08/vue-masonry
Install & Download: