Блог

Я пытаюсь реализовать masonry grid с помощью плагина vue-masonry. Я использую Nuxt и Vuetify. Похоже, что vue-masonry не работает с vuetify.

1. Я подключаю vue-masonry как плагин (vue-masonry.js ) для моего проекта Nuxt

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

2. Я настраиваю плагин в nuxt.config.js

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

3. Затем я пытаюсь использовать vuetify grid с vue-masonry, и здесь все сломано

     <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 не отображается, просто очистите столбцы vuetify с помощью карточек.

Как я могу создать сетку masonry с помощью vuetify? Я буду рад любым предложениям и реализациям masonry grid с vuetify.

Я нашел правильное сеточное решение для vue-masonry с помощью vuetify! Это работает как шарм =)

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