Package Exports

@yeger/vue-masonry-wall

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@yeger/vue-masonry-wall) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-masonry-wall

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

Features

📱 Responsive: Fully responsive with configurable padding and column width.
🔁 Reactive: Reacts to property changes.
✨ Lightweight: Zero dependencies.

Installation

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

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

Usage

Vue 3

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

const app = createApp()

app.use(MasonryWall)

<template>
  <masonry-wall :items="items" :ssrColumns="1" :width="300" padding="1rem">
    <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 the Vue 2 component vue-masonry-wall by Fuxing Loh.

JSPM

@yeger/vue-masonry-wall