vuetify-masonry

Lightweight Vue 3 component for responsive masonry-style grids built on Vuetify 3 primitives.

✨ Features

• 📱 Fully responsive - Automatic column adjustment across all breakpoints
• ⚡ Lightweight - Built on Vuetify's native layout components
• 🎯 Flexible - Customizable column count per breakpoint
• 🔧 TypeScript - Full type support included
• 🎨 Slot-based - Complete control over item rendering

🚀 Demo

📦 Installation

npm install vuetify-masonry

Peer dependencies: Vue 3 and Vuetify 3

📖 Usage

Import VMasonry and simply use it in template.

<script setup>
  import { VMasonry } from 'vuetify-masonry'

  const cards = [
    { title: 'Card 1', description: 'Short' },
    { title: 'Card 2', description: 'Longer content to show varying heights' }
  ]
</script>

<template>
  <v-masonry :items="cards" col="2" sm="3">
    <template #default="{ item }">
      <v-card>
        <v-card-title>{{ item.title }}</v-card-title>
        <v-card-text>{{ item.description }}</v-card-text>
      </v-card>
    </template>
  </v-masonry>
</template>

⚙️ API

Props

• items (Array<T>): List of items to render
• col, xs, sm, md, lg, xl, xxl (1 | 2 | 3 | 4 | 6 | 12): Column count per breakpoint (mobile-first)

Slot

Default slot - Renders each item in the masonry grid

Slot props:

• item - The item value from the items array
• index - The index of the item within its column
• columnIndex - The index of the column where the item is placed

🏗️ How It Works

The component distributes items across columns using a round-robin algorithm (columns[index % nbColumns]), ensuring balanced column heights. It leverages Vuetify's VRow and VCol components for responsive grid behavior.

🌟 Showcase

Using vuetify-masonry in your project? Open a PR to add it here!

License

MIT