Learn Nuxt with a Collection of 100+ Tips!

easy-lightbox
easy-lightbox

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

Nuxt Easy Lightbox

Nuxt Splide - NPM PackageNuxt Splide - NPM Package DownloadsNuxt Splide LicenseNuxt Splide - Nuxt

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

Nuxt Easy Lightbox

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