vue-masonry
Vue.js directive for masonry blocks layouting. Original masonry library.
Plugin DEMO available ๐
You can also clone the basic demo repository vue-masonry + vue-cli webpack.
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();
Install & Usage
-
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. -
Use in component code
import Vue from 'vue' import {VueMasonryPlugin} from 'vue-masonry'; 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>
Properties 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;origin-left="false"
- set to group elements to the right instead of left by defaultorigin-top="false"
- set to group elements to the bottom instead of top by defaultstamp=".stamp"
- specifies which elements are stamped within the layoutgutter=".gutter-block-selector"
- specifies [horizontal space between item elements] (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
๐ก๐ก๐ก 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.
- 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)
- Add this plugin to your
nuxt.config.js
plugins: [
{ src: '~/plugins/vue-masonry', ssr: false }
]
(NB make sure ssr is set to false)
- 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
Questions, bugs
- Check the original masonry library docs
- Create an issue or ping me on twitter @legkoletat
License
MIT