Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work with Nuxt #54

Open
danieldanielecki opened this issue Oct 2, 2021 · 1 comment
Open

Doesn't work with Nuxt #54

danieldanielecki opened this issue Oct 2, 2021 · 1 comment

Comments

@danieldanielecki
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants