Dart
Dart
HTML Canvas
HTML Canvas
Redis
Redis
Bash
Bash
JavaScript
JavaScript
Vue Masonry

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;
Comments
Related