Mashed Everything

[thetestcoder]

i added this package as plugin in Nuxtjs. I follow documentation but i not get desire result

this is what i get

this is what is want

Plugin -

import Vue from 'vue'
import VueJustifiedLayout from 'vue-justified-layout'

Vue.use(VueJustifiedLayout)

nuxt config

plugins: [
    { src: '@/plugins/gallery.js', ssr: false } 
  ],

main File Where i used it

<template>
<div>
    <VueJustifiedLayout :items="images">
      <template slot-scope="{ item }">
        <nuxt-link :to="{name:'slug', params:{slug:item.slug}}">
          <img
            :src="item.thumb"
            :alt="item.name"
            loading="lazy"
          >
        </nuxt-link>
      </template>
    </VueJustifiedLayout>
  <infinite-loading spinner="spiral" @infinite="infiniteHandler">
    <div slot="no-more">Come Back Again 😉</div>
  </infinite-loading>
</div>
</template>

<style scoped>
.justified-container {}
.justified-item {
img {
  max-width: 100%;
}
}
</style>

<script>
export default {
  data(){
    return {
      url:"/get-images",
      page:1,
      images:[],
    }
  },
  mounted() {

  },
  methods:{
    infiniteHandler($state) {
      this.$axios.$get(this.url, {
        params: {
          page: this.page,
        },
      }).then(({ data }) => {
        if (data.length) {
          this.page += 1;
          this.images.push(...data);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
  }
};
</script>

Nuxtjs Version

 "nuxt": "^2.14.0",

[slavko98]

@thetestcoder - I had a similar issue, but for me it was because of the missing/incorrectly mapped height and width parameters. Once I fixed that, the images showed correctly.

Here is how I implemented it:

<template>
  <div class="containter">
    <VueJustifiedLayout :items="images" v-slot="{ item }" :options="justifiedOptions">
      <img :src="item.url" />
    </VueJustifiedLayout>
  </div>
</template>

  export default {
    data() {
      return {
        images: [],
        justifiedOptions: {
        },
      }
    },
    mounted() {
      fetch('/api/image-search')
        .then(response => response.json())
        .then(response => {
          var search_images = JSON.parse(response.data);
          search_images.forEach(element => {
            this.images.push({
              width: element.WIDTH,
              height: element.HEIGHT,
              url: 'http://example.com' + element.URL,
            });
          });
        });
    },

}
<style>
  .justified-item img {
    max-width: 100%;
  }
</style>