search

RobinCK / vue-gallery

:camera: Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. 🇺🇦
https://robinck.github.io/vue-gallery/
MIT License
471 stars 84 forks source link

[Bus Nuxt JS Deploy] blueimp Gallery: Widget container not found. #blueimp-gallery #113

Open thinguyennam4059605 opened 4 years ago

thinguyennam4059605 commented 4 years ago

"vue-gallery": "^2.0.1", "nuxt": "^2.0.0", npm run build npm run start

 {
      src: '~/plugins/vue-gallery.js',
      ssr: false
    }
import Vue from 'vue'
import VueGallery from 'vue-gallery'

Vue.component('VGallery', VueGallery)
rlam3 commented 3 years ago

@thinguyennam4059605 were you able to find a workaround?

Lecraminos commented 2 years ago

Although it has been almost three years since the original request, I encountered the same issue. However, the solution is quite simple. Just make sure, that the gallery gets rendered exclusively on the client side:

Therefore, in nuxt.config.js setup your gallery-plugin file as follows:

plugins: [
   ...
   { src: '@/plugins/vue-gallery', mode: 'client' },
   ...
],

Furthermore, when using the component in the actual Vue file, make sure to wrap it into a client-only tag:

<client-only>
   <v-gallery
      :images="images"
      :index="index"
      :options="options"
      @close="index = null"
   ></v-gallery>
</client-only>

That did the trick for me...