A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this because other libraries has no SSR support, and I needed a pure vue implementation.

View Demo View Github


npm i vue-masonry-wall
# or yarn
yarn add vue-masonry-wall


  • No Direct DOM Manipulation
  • SSR friendly, able to load and re hydrate later
  • 1 dependency only, no legacy dependencies
  • Auto lazy appending, scroll to auto load more
  • Auto item placement, will find best column
  • Responsive design


<vue-masonry-wall :items="items" :options="options" @append="append"/>
const items = []
const options = {
  width: 300,
  padding: {
    default: 12,
    1: 6,
    2: 8

const append = () => {
  // API call and add items

#masonry #layout #vue #dom

A pure Vue responsive masonry layout without direct dom manipulation
17.85 GEEK