shershen08 / vue-masonry

💠 Vue.js directive for masonry blocks layouting ✅
MIT License
677 stars 81 forks source link
layout masonry vue vue3 vuejs

vue-masonry

DEPENDENCIES status

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.

Usage

Install via NPM

Usage with build tools

Usage with Vue 3

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/vue-masonry@0.11.3/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:

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'

Vue.use(VueMasonryPlugin)
  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:

HTML:

    <client-only>
      <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>
    </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

Contributing

Thanks to all the contributors for making the plugin better!

Questions, bugs

Known issues

License

MIT