Nuxt Issue: No errors but doesn't activate

[KloudDev]

Hey there!! Want to preface this in that I'm.. very new to anything Vue/Nuxt, so whatever I'm missing is probably going to be real dumb and I apologize.

So my issue seems to be mostly the same as #58 , but the fix didn't work.

I installed the pkg via npm, created vue-cool-lightbox.client.js with the following code:

import Vue from 'vue'
import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

Vue.use(CoolLightBox)

---

The plugin in nuxt.config like so:

 plugins: [
    '~/plugins/vue-cool-lightbox.client.js'
  ],

---

And my page looks like this:

<!-- eslint-disable -->
<template>
<div id="app">
  <coollightbox 
     :items="items" 
     :index="index"
     loop
     @close="index = null">
  </coollightbox>

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

  <div class="images-wrapper images-wrapper-img">
    <img
      class="image"
      v-for="(image, imageIndex) in items"
      :key="imageIndex"
      @click="setIndex(imageIndex)"
      :src="image.src"
     />
  </div>
</div>
</template>

<style>
.images-wrapper {
  display: flex;
}

.images-wrapper .image {
  width: 300px;
  height: 300px;
  background-size: cover;
}

.images-wrapper-divs {
  margin-bottom: 40px;
}

.images-wrapper-img img {
  object-fit: cover;
}
</style>

<script>
/* eslint-disable */
export default {
  data: function () {
    return {
       items: [
        "https://cosmos-images2.imgix.net/file/spina/photo/20565/191010_nature.jpg",
        "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg",
      ],
      index: null
    };
  },
  methods: {
    setIndex(index) {
      this.index = index
    }
  }
}
</script>

---

But all I get is this.

If I add another url to the items array, I get another square. So it's picking up the right number at least.

Back to #58 , I DID take a look at your fiddle (as you can see I tried adding the css in my page already).

I tried doing it as close as possible, but when I used this instead of export default {

new Vue({
    components: {
    coollightbox: CoolLightBox.default
    },

I get an error that Vue is not defined.

I try just arranging the array differently like you did in the fiddle like so:

items: [
       {
          src: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg',
        },
        {
          src: 'https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg',
        }
      ],

And this happens instead. (notice how despite there being 3 images, it only dupes it twice). The lightbox doesn't seem to activate, clicking does nothing.

What might I be doing wrong?

---

I've tried at least half a different dozen plugins and only this and one other that didn't have the full functionality I needed even semi worked. Been at this for days, so thanks in advance.

[Chernavskikh]

@KloudDev hi, have you tried to enable client mode in plugins declaration?

 { src: '~/plugins/vue-lightbox', mode: 'client' },

[mrleblanc101]

You need to wrap the CoolLightBox in a <client-only> tag as it's only loaded on the client-side.