Nuxt Easy Lightbox

A plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation

Features

• 🪶  Lightweight, Fast Loading
• ❤️  Easy to Use with Lots of Features
• 🖼️  Image Slider in Lightbox

Quick Setup

1. Install the module to your Nuxt application with one command:

   npx nuxi module add easy-lightbox

2. Add module to nuxt.config.ts

   export default defineNuxtConfig({
     modules: ['nuxt-easy-lightbox'],
   })

3. 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 to imgs 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 ✨

Contribution

Local development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
npm run release