vmw

@yeger/vue-masonry-wall

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

Showing:

Popularity

Downloads/wk

62

GitHub Stars

12

Maintenance

Last Commit

4d ago

Contributors

3

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

@yeger/vue-masonry-wall

Logo

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

CI NPM Coverage LGTM Grade npm peer dependency version MIT npm bundle size

Features

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

Installation

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

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

Usage

import { createApp } from 'vue'
import MasonryWall from '@yeger/vue-masonry-wall'

const app = createApp()

app.use(MasonryWall)

Props:

  • items: Array of items. Required.
  • ssr-columns: Number of pre-calculated columns for server-side-rendering. Optional.
  • padding: Spacing between items in px. Defaults to 0.
  • rtl: Toggles between LTR (false) and RTL (true) layouts. Defaults to false.
<template>
  <masonry-wall :items="items" :ssr-columns="1" :column-width="300" :padding="16">
    <template #default="{ item, index }">
      <div style="height: 100px">
        <h1>{{ item.title }}</h1>
        <span>{{ item.description }}</span>
      </div>
    </template>
  </masonry-wall>
</template>

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

Development

# install dependencies
$ yarn install

# build for production
$ yarn build

# lint project files
$ yarn lint

# serve demo
$ yarn demo:serve

# build demo for production
$ yarn demo:build

Disclaimer

This library is based on vue-masonry-wall by Fuxing Loh.

License

MIT - Copyright © Fuxing Loh, Jan Müller

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100