doesn't work in vue.js/nuxt 3

[HugoSbl]

Description

The lightgallery doesn't works in vue 3 with nuxt 3 with composition api.

Steps to reproduce

• Install vue3/nuxt3
• Install light gallery
• then adapt the code to composition api

JS code that you use to initialize lightGallery.

<template>
    <div class="mb-15 m t-8 mx-auto flex h-full md:max-w-6xl">
        <lightgallery :settings="{ speed: 500, plugins: plugins }">
            <img alt="img1" src="/images/fakeImages/profile.png" />
            <img alt="img1" src="/images/fakeImages/profile.png" />
            <img alt="img1" src="/images/fakeImages/profile.png" />

            <img alt="img1" src="/images/fakeImages/profile.png" />
        </lightgallery>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import Lightgallery from 'lightgallery/vue';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

const plugins = ref([lgThumbnail, lgZoom]);
</script>

<style lang="css" scoped>
@import 'lightgallery/css/lightgallery.css';
@import 'lightgallery/css/lg-thumbnail.css';
@import 'lightgallery/css/lg-zoom.css';
</style>

Additional Context

• imports are working properly
• there is no errors in console nor in browser

[sun0225SUN]

Excuse me, did you solve it? I also encountered the same problem.

[HugoSbl]

I didn't ! That's too bad, but I had to did it custom

[sun0225SUN]

ok，thanks

[IthJ]

Hey, I was able to get it working with Nuxt 3 and Vue.js Composition API.

You need to wrap each <img> tag with an <a> tag. You'll also need to make sure the data-src and data-lg-size are set.

Here's an example of my setup using NuxtImg:

<a  v-for="image in images"
      :data-src="image.url" 
      :data-lg-size="image.width + '-' + image.height"
>
                <NuxtImg
                    :key="image.id"
                    :id="image.id"
                    :src="image.url"
                    :alt="image.name"/>
</a>

I hope this helps!

[HugoSbl]

hey, I really hope it will be usefull for someone, thanks a lot !