Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support.


  • 📱 Responsive: Responsive to configurable column widths and gaps. Based on ResizeObserver.
  • Reaction: reacts to changes in properties.
  • 🪶 Lightweight: zero dependencies. Less than 1.2 KB.
  • ⬅️ RTL: Supports LTR and RTL layouts.

Must Read: Responsive And Lightweight Masonry Grid jQuery Plugin

How to make use of it:

Install and download:

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

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

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 display the basic build layout in your application.

  <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. Props component.

  • items: Array of items. Required.
  • column-width: Minimal width of columns in px.
  • gap: Spacing between items in px. Defaults to 0.
  • rtl: Toggles between LTR (false) and RTL (true) layouts. Defaults to false.
  • ssr-columns: Number of server-side-rendered columns. Optional.
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,

See Demo And Download


Official Website(DerYeger): Click Here

This superior jQuery/javascript plugin is developed by DerYeger. For extra advanced usage, please go to the official website.

Related Posts


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…


WYSIWYG Rich Text Editor For Angular Using ProseMirror

NgxEditor WYSIWYG Rich Text Editor for Angular using ProseMirror. Based on the iconic font Ngx-Bootstrap and Font Awesome. ngx-editor is a simple rich text editor for Angular applications…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

Leave a Reply

Your email address will not be published. Required fields are marked *