@yeger/vue2-masonry-wall

Responsive masonry layout with SSR support and zero dependencies for Vue 2.

Features

• 📱 Responsive: Responsive with configurable column width and gaps. Based on ResizeObserver.
• 🔁 Reactive: Reacts to property changes.
• 🪶 Lightweight: Zero dependencies. Less than 1.7 kB.
• ⬅️ RTL: Supports LTR and RTL layouts.

Links

• Demo
• Vue 3 version
• vue-masonry-wall by Fuxing Loh

Installation

# yarn
$ yarn add @yeger/vue2-masonry-wall

# npm
$ npm install @yeger/vue2-masonry-wall

Usage

import Vue from 'vue'
import MasonryWall from '@yeger/vue2-masonry-wall'

Vue.use(MasonryWall)

Props:

• items: Array of items. Required.
• column-width: Minimal width of columns in px.
• gap: Spacing between items in px. Defaults to 0.
• rtl: Toggles between LTR (false) and RTL (true) layouts. Defaults to false.
• ssr-columns: Number of server-side-rendered columns. Optional.

<script>
export default {
  data() {
    return {
      items: [
        { title: 'First', description: 'The first item.' },
        { title: 'Second', description: 'The second item.' },
      ],
    }
  },
}
</script>

<template>
  <masonry-wall :items="items" :ssr-columns="1" :column-width="300" :gap="16">
    <template #default="{ item, index }">
      <div style="height: 100px">
        <h1>{{ item.title }} ({{ index }})</h1>
        <span>{{ item.description }}</span>
      </div>
    </template>
  </masonry-wall>
</template>

Development

# install dependencies
$ pnpm install

# develop in watch mode
$ pnpm dev

# build for production
$ pnpm build

# lint project files
$ pnpm lint

# run tests
$ pnpm test

Disclaimer

This component originated as a modified version of vue-masonry-wall by Fuxing Loh.

License

MIT - Copyright © Fuxing Loh, Jan Müller