vue-next-masonry

This is a port of vue-masonry-css for Vue 3

Usage

import { createApp } from 'vue';
import masonry from 'vue-next-masonry';

createApp(...)
  .use(masonry)
  .mount(...);

In your Vue template...

<masonry :cols="3" :gutter="30">
  <div v-for="(number, index) in 20" :key="index">
    {{ number }}
  </div>
</masonry>

Here's a codesandbox example

Config

Everything is similar to the original component. You can learn more about props/config here.

Slot support

If you are using a <slot /> to load child items, use the prop :resolve-slot="true".

<masonry :resolve-slot="true">
   <slot />
</masonry>