Masonry Wall is a Vue 3 component for rendering a responsive, Masonry-style grid layout with support for SSR and RTL layout.
How to use it:
1. Import and register the component.
import { createApp } from 'vue' import MasonryWall from '@yeger/vue-masonry-wall' const app = createApp() app.use(MasonryWall)
2. This example shows how to render a basic masonry layout in your app.
<template> <masonry-wall :items="items" :ssr-columns="1" :column-width="300" :padding="16"> <template #default="{ item, index }"> <div style="height: 150px"> <h1>{{ item.title }}</h1> <span>{{ item.description }}</span> </div> </template> </masonry-wall> </template>
export default { data() { return { items: [ { title: 'First', description: 'The first item.' }, { title: 'Second', description: 'The second item.'}, { title: 'Third', description: 'The third item.'}, // more items here ] } } }
3. Component props.
items: { type: Array as PropType<unknown[]>, required: true, }, ssrColumns: { type: Number as PropType<number | undefined>, default: undefined, }, columnWidth: { type: Number, default: 400, }, padding: { type: Number, default: 0, }, rtl: { type: Boolean, default: false, },
Preview:
Changelog:
v3.3.2 (11/26/2022)
- Bugfix & update
Download Details:
Author: DerYeger
Live Demo: https://vue-masonry-wall.yeger.eu/
Download Link: https://github.com/DerYeger/vue-masonry-wall/archive/refs/heads/master.zip
Official Website: https://github.com/DerYeger/vue-masonry-wall
Install & Download:
# Yarn
$ yarn add @yeger/vue-masonry-wall
# NPM
$ npm i @yeger/vue-masonry-wall --save