Skip to content
πŸ’  Vue.js directive for masonry blocks layouting βœ…
Branch: master
Clone or download
shershen08 Update
update current version
Latest commit d8413b6 Nov 19, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Fix banner not displaying in build Oct 29, 2018
src Merge pull request #76 from nicroto/master Aug 19, 2018
.eslintignore add webpack builder for prod Aug 9, 2017
.gitignore Update dependancies Oct 27, 2018
LICENSE Create LICENSE Sep 5, 2018 Update Nov 19, 2018
bower.json rebuild and bump the version Dec 7, 2017
index.js remove intermediate .vue file and reference directly .js #23 Aug 2, 2017
package.json bump version Nov 19, 2018
webpack.config.js Fix banner not displaying in build Oct 29, 2018



Current version: 0.11.7

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

Plugin DEMO available πŸŽ‰, JSFiddle DEMO

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


Install via NPM

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

    or from bower bower install vue-masonry

  • Make sure that the masonry library is included; for example using cdn link: <script async defer src=""></script> or in other convenient way.

Usage with build tools

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

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

Usage directly in the browser

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

<script src=""></script>
var VueMasonryPlugin = window["vue-masonry-plugin"].VueMasonryPlugin


Properties that are currently available reproduce most of those on the original 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. ( 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.

πŸ’‘πŸ’‘πŸ’‘ 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 use this.$redrawVueMasonry() method. (If you use old version < 0.10.11 it can still be Vue.redrawVueMasonry(), but please consider to upgrade)

NUXT ssr implimentation

The best way to impliment this is to use the no-ssr plugin.

  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'

  1. Add this plugin to your nuxt.config.js
  plugins: [
    { src: '~/plugins/vue-masonry', ssr: false }

(NB make sure ssr is set to false)

  1. Add no-ssr and the markup for your vue-masonry to a component:


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


  import NoSSR from 'vue-no-ssr'

  export default {
    components: {
      'no-ssr': NoSSR
    mounted () {
      if (typeof this.$redrawVueMasonry === 'function') {

An example implimentation of vue-masonry with nuxt ssr can be found here -


Thanks to all the contributors for making the plugin better!

Questions, bugs

Known issues

  • 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 method redrawVueMasonry in component methods from Vue.redrawVueMasonry() to this.$redrawVueMasonry();. See more details in #31 issue



You can’t perform that action at this time.