parys-github / vue-masonry-gallery Goto Github PK

Hi there, love the library! I've been looking around at solutions but other libraries (Vue-Masonry, Vue-Masonry-CSS) are clunky. This one looks perfect. I do have a couple of questions for you though...

1. Does this offer Nuxt support? I created a plugin file as normal, added it to my nuxt config, and when I try to implement it nothing appears. There are no console errors either. The only thing I noticed is that when I inspect where the elements should be, I see <vue-masonry-gallery data-v-7062751f="" imgs-arr="[object Object],[object Object],[object Object],[object Object],[object Object]" src-key="source.public_id" max-cols="3"></vue-masonry-gallery>, so it looks like it's not being converted correctly to a div like your example does.

2. The way my data coming in is structured, I have an array of five objects. Each object has a source object, and inside of that source object is a public_id URL where I'm pulling in my images from a CDN. How would I go about using the :srcKey attribute to access that src?

Thanks!

We've noticed that all thumbnails are loaded twice - the first time by VueMasonryGallery.vue, the second - by vue itself - what in case of very small jpegs is not a problem, but in case of 500+kb photos could be not so cool :(

Hi, I am just using the basic example from docs:

<vue-masonry-gallery :imgsArr="imgsArr" 
    @scrollReachBottom="fetchData"></vue-masonry-gallery>

and assigning the images

let t = this.images.map(i => ({ url: `${this.apiUrl}/${i.id}/File`, href: `HREFDUR` }));
this.masonryImages = this.masonryImages.concat(t);

but it just shows as 'loading' forever:

I can see that the values have been assigned in dev tools:

Hello,

I'm trying to use your component but import VueMasonryGallery from "vue-masonry-gallery"; fails with: Module not found: Error: Can't resolve 'vue-masonry-gallery' in '/root/social/src/components'

I guess you're missing an export somewhere.

Regards,

Cyrille

I have tried npm install --save vue-masonry-gallery but it does not work.