A plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.
npm install nuxt-easy-lightbox
A plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.
- ⨠Release Notes
- đ Online playground
- đ Documentation
- đĒļ Lightweight, Fast Loading
- â¤ī¸ Easy to Use with Lots of Features
- đŧī¸ Image Slider in Lightbox
1. Install the module to your Nuxt application with one command:
``bash`
npx nuxi module add nuxt-easy-lightbox
2. Add module to nuxt.config.ts`
js`
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.
`vue
v-for="(src, index) in imgs"
:key="index"
class="pic"
@click="() => showImg(index)"
>
:imgs="imgs"
:index="indexRef"
@hide="onHide"
/>
`VueEasyLightbox
Remember
- For group of images you need only a single since they can be viewed through slider. Put all the images in an Array and pass it to imgs argument.img
- For individual images, for each element you need individual lightbox.
That's it! You can now use Easy Lightbox in your Nuxt app â¨
Local development
`bash``
# 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