vue-masonry-wall

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

Installation

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

Features

• 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

Usage

<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
  this.items.push(...[])
}

#masonry #layout #vue #dom