ChristophAnastasiades / Lingallery

Lingallery is a simple image gallery component for Vue.js
59 stars 22 forks source link

Doesn't work with Nuxt #54

Open danieldanielecki opened 3 years ago

danieldanielecki commented 3 years ago

Would be appreciated to have this plugin working with Nuxt, I've tried the setup below and it doesn't work.

plugins/test.js

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
import LightBox from 'vue-image-lightbox'

Vue.use(VueLazyLoad)
Vue.component('lingallery', LightBox)

nuxt.config.js

plugins: [
    { src: '~/plugins/test.js', ssr: false }, // without ssr also doesn't work.
],

component.vue

<template>
  <lingallery
    :width="width"
    :height="height"
    :items="items"
    :media="media"
  />
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      width: 600,
      height: 400,
      items: [
        {
          src: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
          thumbnail: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
          caption: 'Some Caption',
          id: 'someid1',
        },
        {
          src: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
          thumbnail: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
        },
      ],
      media: ['(min-width: 600px)'],
    }
  },
})
</script>

There's nothing in the console and on the page I can simply see an empty page with 1/1 as in the screenshot below. ss

rklipach commented 3 years ago

I could be wrong but you're trying to use vue-image-lightbox which is not a lingallery. Try to rework your plugin file and replace its content with the following which is working fine for me

import Vue from 'vue';
import Lingallery from 'lingallery';

Vue.component('lingallery', Lingallery);

Or try to put a question within corresponding repo https://github.com/pexea12/vue-image-lightbox