https://github.com/modbender/nuxt-easy-lightbox
A plugin for simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.
https://github.com/modbender/nuxt-easy-lightbox
Last synced: 8 months ago
JSON representation
A plugin for simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.
- Host: GitHub
- URL: https://github.com/modbender/nuxt-easy-lightbox
- Owner: modbender
- License: mit
- Created: 2024-04-23T18:58:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-29T18:29:24.000Z (over 1 year ago)
- Last Synced: 2025-04-09T23:51:17.347Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 12.8 MB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Nuxt Easy Lightbox
A plugin to the simple Vue 3 Image Lightbox component with Zoom / Drag / Rotate / Switch.
- [✨ Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/modbender/nuxt-easy-lightbox?file=playground%2Fapp.vue)
- [📖 Documentation](https://github.com/XiongAmao/vue-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:
```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
showImg(index)"
>
![]()
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);
```
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
```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
```