1.0.2 • Published 17 days ago
nuxt-easy-lightbox v1.0.2
Features
- 🪶 Lightweight, Fast Loading
- ❤️ Easy to Use with Lots of Features
- 🖼️ Image Slider in Lightbox
Quick Setup
Install the module to your Nuxt application with one command:
npx nuxi module add easy-lightbox
Add module to
nuxt.config.ts
export default defineNuxtConfig({ modules: ['nuxt-easy-lightbox'], })
Next use the component
VueEasyLightbox
right next to image element for which you want to use lightbox.<template> <div> <div v-for="(src, index) in imgs" :key="index" class="pic" @click="() => showImg(index)" > <img :src="src" /> </div> <VueEasyLightbox :visible="visibleRef" :imgs="imgs" :index="indexRef" @hide="onHide" /> </div> </template> <script setup> const visibleRef = ref(false); const indexRef = ref(0); const imgs = [ "https://via.placeholder.com/450.png/", "https://via.placeholder.com/300.png/", "https://via.placeholder.com/150.png/", { src: "https://via.placeholder.com/450.png/", title: "this is title" }, ]; const showImg = (index) => { indexRef.value = index; visibleRef.value = true; }; const onHide = () => (visibleRef.value = false); </script>
Remember
- For group of images you need only a single
VueEasyLightbox
since they can be viewed through slider. Put all the images in an Array and pass it toimgs
argument. - For individual images, for each
img
element you need individual lighbox.
That's it! You can now use Easy Lightbox in your Nuxt app ✨