Vue Masonry

💠 Vue.js directive for masonry blocks layouting ✅
Alternatives To Vue Masonry
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Egjs Infinitegrid1,6755132 months ago135August 04, 202321mitTypeScript
A module used to arrange card elements including content infinitely on a grid layout.
Vue Masonry62967285 months ago39July 14, 202216mitJavaScript
💠 Vue.js directive for masonry blocks layouting ✅
Vue Masonry Css3122174 years ago6August 19, 201820mitJavaScript
Vue.js Masonry layout component powered by CSS, dependancy free
Egjs Grid2237a month ago63February 06, 202311otherTypeScript
A component that can arrange items according to the type of grids
Vue Magic Grid175
39 months ago4January 30, 20196unlicenseJavaScript
🧙‍♂️🔌 Responsive Magic Grid for Vue
Vue Masonry Wall13012 years ago13March 15, 202122mitVue
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
2 months ago12otherVue
An anime illustration sharing site
Yandere Masonry58
a month ago1mitVue Masonry(Waterfall) Layout. 中文标签 & 缩略图放大 & 双击翻页 & 瀑布流浏览
Vue Masonry Gallery32
22 years ago4July 25, 20184SCSS
Masonry gallery layout component for Vue.js
Vue Colcade19
22 years ago8February 09, 20198mitJavaScript
📐Colcade plugin for Vue.js 2 - Lightweight masonry
Alternatives To Vue Masonry
Select To Compare

Alternative Project Comparisons



Current version: 0.16.0

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

Plugin DEMO available 🎉, JSFiddle DEMO

The plugin can be easily integrated with different CSS Frameworks. Check this Tailwind CSS 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="containerId" transition-duration="0.3s" item-selector=".item">
        <div v-masonry-tile class="item" v-for="(item, index) in blocks">
           <!-- block item markup -->

Usage with Vue 3

  • Use version >= 0.14.0

  • or of using earlier version: Dependencies: mitt package In 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 = emitter
    const containerId = 42 // optional, if you need multiple containers on page
    const blocks = [1,2,3,4,5,6]
    <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 -->

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="[email protected]/dist/vue-masonry-plugin-window.js"></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.
  • destroy-delay="0" - Amount of time (in milliseconds) to wait before unloading masonry via masonry.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 use this.$redrawVueMasonry('containerId') method. As of 0.11.8 your can pass id of the block where you want to trigger the redraw.

(If you use old version < 0.10.11 it can still be Vue.redrawVueMasonry(), but please consider to upgrade)

NUXT ssr implementation

The best way to implement this is to use the vue-client-only plugin. This project is previously known as vue-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'

  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 client-only wrapper 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 ClientOnly from 'vue-client-only'

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

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


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



Popular Masonry Projects
Popular Vue Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Server Side Rendering