Description:
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.0.17 (01/21/2022)
- Bug Fixes
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