how to use lightgallery.js with Vue 3

Question

I'm getting

500 [vite-node] [ERR_MODULE_NOT_FOUND] lightgallery/vue" error

Is there any way to fix this issue?
I'm using Nuxt v3.0.0-rc.12 and Vue v3.2.41

<script setup>
import Lightgallery from 'lightgallery/vue'
</script>

<template>
  <lightgallery>
    <a
      data-lg-size="1406-1390"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>"
    >
      <img
        class="img-responsive"
        src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
    <a
      data-lg-size="1400-1400"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@asoshiation' >Shah </a></h4><p> Location - <a href='https://unsplash.com/s/photos/shinimamiya%2C-osaka%2C-japan'>Shinimamiya, Osaka, Japan</a></p>"
    >
      <img
        class="img-responsive"
        src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
    <a
      data-lg-size="1400-1400"
      class="gallery-item"
      data-src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
      data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>"
    >
      <img
        style="width: 200px"
        class="img-responsive"
        src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
      />
    </a>
  </lightgallery>
</template>

PS: I'm using Lightgallery.js

Maybe related to this issue? https://stackoverflow.com/a/72057190/8816585 I'll give it a try if I have some time. — kissu, Nov 07 '22 at 13:20

score 0 · Answer 1 · edited Dec 28 '22 at 23:31

0

you must directly import js file

import Lightgallery from 'lightgallery/vue/LightGalleryVue.umd.js';

other plugins too

edited Dec 28 '22 at 23:31

kissu

40,416
14
65
133

answered Dec 28 '22 at 22:52

Mohammad Chavoshi

183
2
13

how to use lightgallery.js with Vue 3

1 Answers1