Masonry Layout With SSR Support – Masonry Wall

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()

2. This example shows how to render a basic masonry layout in your app.

  <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>
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,


Masonry Layout With SSR Support Masonry Wall


v3.3.2 (11/26/2022)

  • Bugfix & update

Download Details:

Author: DerYeger

Live Demo:

Download Link:

Official Website:

Install & Download:

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

$ npm i @yeger/vue-masonry-wall --save

Add Comment