nuxt-easy-lightbox

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

• Install the module to your Nuxt application with one command:

  npx nuxi module add nuxt-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 to imgs argument.
• For individual images, for each img element you need individual lightbox.

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