Integration in nuxtjs

[vinodugale257]

Hello @lucaspulliese,

I am trying to integrate vue-cool-lightbox in nuxtjs project but facing some issue.

I install the package via yarn

yarn add vue-cool-lightbox

I created cool-lightbox.js inside the plugins directory with following code.

import Vue from 'vue'
import CoolLightBox from 'vue-cool-lightbox'
Vue.use(CoolLightBox)

then include the plugin inside nuxt.config.js

plugins: [{ src: '~/plugins/cool-lightbox', ssr: false }],

Finally, I created Gallery.vue inside pages directory with following code.

<template>
  <div id="app">
    <CoolLightBox
      :items="items"
      :index="index"
      :effect="'fade'"
      @close="index = null"
    >
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        class="image"
        :style="{ backgroundImage: 'url(' + image + ')' }"
        @click="index = imageIndex"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        'https://cosmos-images2.imgix.net/file/spina/photo/20565/191010_nature.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835',
        'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
      ],
      index: null,
    }
  },
}
</script>

When I navigate to http://localhost:3000/gallery I am not able to see vue-cool-lightbox is integrated.

I can see the images gets loaded inside DOM in the console.

Please help me out.....

https://github.com/vinodugale257/nuxt-cool-lightbox

[lucaspulliese]

Hi @vinodugale257!

Thanks for using the component.

What's happening there it's that those divs are using those images as backgrounds, and those divs are empty, so that's why their heights are 0.

I did a JSFiddle, with examples with divs and background images and with img tags too.

So basically it was a css problem.

If I wasn't clear or you need any other help, please let me know.

[sioniks]

@lucaspulliese thanks, i had the same problem. you saved me a lot of time