Repository files navigation

Current version: 0.16.0

Vue.js directive for masonry blocks layouting. Originalmasonry library.

PluginDEMO available 🎉,JSFiddle DEMO

The plugin can be easily integrated with different CSS Frameworks. Check thisTailwind CSS DEMO.

You can also clone the basic demo repositoryvue-masonry + vue-cli webpack.

• Get from npm:npm install vue-masonry --save

  or from bowerbower install vue-masonry

• Make sure that the masonry library is included; for example using cdn link:<script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> or in other convenient way.

• In your Vue app you'll have the following code:

  import Vue from 'vue'// import ES6 styleimport {VueMasonryPlugin} from 'vue-masonry';// or using CJS // const VueMasonryPlugin = require('vue-masonry').VueMasonryPluginVue.use(VueMasonryPlugin)<div v-masonry="containerId" transition-duration="0.3s" item-selector=".item">    <div v-masonry-tile v-for="(item, index) in blocks">       <!-- block item markup -->    </div></div>

• Use version >=0.14.0

• or of usingearlier version:Dependencies:mitt packageIn your Vue 3 app, you'll have the following code

  import { createApp } from 'vue'import mitt from 'mitt'import { VueMasonryPlugin } from "vue-masonry";const emitter = mitt()let app = createApp(App)app.config.globalProperties.emitter = emitterapp.use(VueMasonryPlugin)app.mount('#app')const containerId = 42 // optional, if you need multiple containers on pageconst blocks = [1,2,3,4,5,6]<div v-masonry="containerId" transition-duration="0.3s" item-selector=".item">  <div v-masonry-tile v-for="(item, index) in blocks">    <!-- block item markup -->  </div></div>

Since v 0.11.3 in-browser usage is available using a direct script inclusion on the page like so:

<script src="https://unpkg.com/vue-masonry@0.11.3/dist/vue-masonry-plugin-window.js"></script>

var VueMasonryPlugin = window["vue-masonry-plugin"].VueMasonryPluginVue.use(VueMasonryPlugin)

Properties that are currently available reproduce most of those on theoriginal masonry plugin:

• 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 viamasonry.destroy() when the container is destroyed. This is useful during page/route transitions to ensure the layout is consistent while the transition takes place.

If you need to manually trigger masonry layout redraw (for example in case if your tile elements amount or content has changed) you can now usethis.$redrawVueMasonry('containerId') method. As of0.11.8 your can pass id of the block where you want to trigger the redraw.

(If you useold version< 0.10.11 it can still beVue.redrawVueMasonry(), but please consider to upgrade)

The best way to implement this is to use thevue-client-only plugin. This project is previously known asvue-no-ssr.

1. Create a file in your plugins folder called vue-masonry.js with the following contents:

import Vue from 'vue'import {VueMasonryPlugin} from 'vue-masonry'Vue.use(VueMasonryPlugin)

2. Add this plugin to yournuxt.config.js

  plugins: [    { src: '~/plugins/vue-masonry', ssr: false }  ]

(NB make sure ssr is set to false)

3. Addclient-only wrapper and the markup for your vue-masonry to a component:

HTML:

    <client-only>      <div v-masonry transition-duration="3s" item-selector=".item">        <div v-masonry-tile :key="index" v-for="(item, index) in blocks">          <p>{{item}} - {{index}}</p>        </div>      </div>    </client-only>

JS:

  import ClientOnly from 'vue-client-only'  export default {    components: {      ClientOnly    },    mounted () {      if (typeof this.$redrawVueMasonry === 'function') {        this.$redrawVueMasonry()      }    }  }

An example implementation of vue-no-ssr old version + vue-masonry with nuxt can be found here -https://github.com/richlloydmiles/example-vue-masonry-ssr

Thanks to all thecontributors for making the plugin better!

• Check theoriginal masonry library docs
• Createan issue or ping me on twitter@legkoletat

• Minor API change (JAN 2018). If you suddenly see error:Uncaught TypeError: _vue2.default.redrawVueMasonry is not a function - please upgrade your usage of the plugin's methodredrawVueMasonry in component methods fromVue.redrawVueMasonry() tothis.$redrawVueMasonry();. Seemore details in #31 issue

MIT