Vue-masonry plugin doesn't work with Vuetify

Question

I try to implement masonry grid via vue-masonry plugin. I use Nuxt and Vuetify. It seems like vue-masonry doesn't do work with vuetify.

1. I connect vue-masonry as plugin (vue-masonry.js) to my Nuxt project

   import Vue from 'vue'
   import {VueMasonryPlugin} from 'vue-masonry'
   
   Vue.use(VueMasonryPlugin)
   

2. I setup the plugin in nuxt.config.js

   plugins: [
      { src: '~/plugins/vue-masonry', ssr: false }
   ],
   

3. Next I try to use vuetify grid with vue-masonry, and here things broken

    <template>
      <v-container>
        <v-row>
          <v-col
            xs="12"
            sm="6"
            md="4"
            lg="3"
            v-for="card in cards"
            :key="card.id"
            v-masonry
            origin-left="true"
            horizontal-order="true"
            transition-duration="0.3s"
            item-selector=".item"
          >
            <v-card v-masonry-tile class="item" max-width="240">
              <v-card-title>{{card.title}}</v-card-title>
              <v-card-text class="text-ellipsis">{{card.text}}</v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </template>
   
    <script>
    export default {
      data() {
        return {
          cards: [
            {
              id: 1,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 2,
              title: "new one",
              text:
                "Lorem Ipsum has when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 3,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. took a galley of type and scrambled it to make",
            },
            {
              id: 4,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 5,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 6,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry.  a galley of type and scrambled it to make",
            },
            {
              id: 7,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 8,
              title: "title",
              text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley",
            },
            {
              id: 9,
              title: "title",
              text:
                "Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",
            },
            {
              id: 10,
              title: "title",
              text: "Lorem Ipsum is simply industry.",
            },
          ],
        };
      },
    };
    </script>
   

masonry grid doesn't appear, just clear vuetify cols with cards.

How can I achieve masonry grid with vuetify? I'll be glad any suggestions and implementations masonry grid with vuetify.

Answer 1

I found a right grid solution for vue-masonry with vuetify! It works like a charm =)

<template>
  <v-container>
    <v-row
      v-masonry
      origin-left="true"
      horizontal-order="true"
      transition-duration="0.3s"
      item-selector=".item"
    >
      <v-col
        v-masonry-tile
        class="item"
        v-for="card in cards"
        :key="card.id"
        xs="3"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <v-card-title>{{ card.title }} {{ card.id }}</v-card-title>
          <v-card-text>{{ card.text }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>