vue-masonry

Current version: 0.11.5

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.

Usage

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="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></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
  
  Vue.use(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 -->
      </div>
  </div>
  

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="https://unpkg.com/[email protected]/dist/vue-masonry-plugin-window.js"></script>

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

Properties

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. (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.

💡💡💡 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'

Vue.use(VueMasonryPlugin)

2. Add this plugin to your nuxt.config.js

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

(NB make sure ssr is set to false)

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

HTML:

    <no-ssr>
      <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>
        </div>
      </div>
    </no-ssr>

JS:

  import NoSSR from 'vue-no-ssr'

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

An example implimentation of vue-masonry with nuxt ssr can be found here - https://github.com/richlloydmiles/example-vue-masonry-ssr

Contributing

Thanks to all the contributors for making the plugin better!

Questions, bugs

• Check the original masonry library docs
• Create an issue or ping me on twitter @legkoletat

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

License

MIT