Gathering detailed insights and metrics for vue-easy-lightbox
Gathering detailed insights and metrics for vue-easy-lightbox
Gathering detailed insights and metrics for vue-easy-lightbox
Gathering detailed insights and metrics for vue-easy-lightbox
A tiny lightbox component for Vue.js 3.0 🎉🎉 https://xiongamao.github.io/vue-easy-lightbox/
npm install vue-easy-lightbox
Typescript
Module System
Min. Node Version
Node Version
NPM Version
TypeScript (61.54%)
Vue (16.57%)
JavaScript (11.98%)
SCSS (8.11%)
HTML (1%)
Shell (0.81%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
453 Stars
394 Commits
70 Forks
2 Watchers
4 Branches
8 Contributors
Updated on Jul 04, 2025
Latest Version
1.19.0
Package Id
vue-easy-lightbox@1.19.0
Unpacked Size
282.78 kB
Size
47.21 kB
File Count
57
NPM Version
10.2.3
Node Version
18.19.0
Published on
Mar 05, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
51
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .
Vue-easy-lightbox@1.x
only supports Vue.js 3, if you need Vue.js 2 version please check here.
1$ npm install --save vue-easy-lightbox@next 2# OR 3$ yarn add vue-easy-lightbox@next
Include the CDN link in HTML.
1<script src="https://unpkg.com/vue@next"></script> 2<script src="https://unpkg.com/vue-easy-lightbox@next/dist/vue-easy-lightbox.umd.min.js"></script> 3<script> 4 const app = Vue.createApp({ 5 // ... root component options 6 }) 7 app.use(VueEasyLightbox) // global variable 8 app.mount('#app') 9</script>
Since Vue 3.x
uses ES2015
(docs faq), there is no need to build ES5
bundle, and ES5
build is removed from version 1.6.0
.
Module | Filename |
---|---|
UMD(for browsers) | vue-easy-lightbox.umd.min.js |
CommonJS | vue-easy-lightbox.common.min.js (pkg.main) |
ES Module(for bundlers) | vue-easy-lightbox.esm.min.js (pkg.module) |
Added in:
v1.2.3
By default, CSS is included in dist/*.min.js
. In some special cases you may want to import CSS individually to avoid some problems (CSP Violation). You can import builds without CSS and individual .css
file from dist/external-css/
.
1import VueEasyLightbox from 'vue-easy-lightbox/external-css' 2// or 3import VueEasyLightbox from 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' 4 5// you need to import css 6import 'vue-easy-lightbox/external-css/vue-easy-lightbox.css' 7// or 8import 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.css'
If your project is TypeScript project and you get this error message:
Could not find the declaration file for module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'
Here are two ways to solve it.
Way 1: add d.ts
in your project:
1declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' { 2 import VueEasyLightbox from 'vue-easy-lightbox' 3 export * from 'vue-easy-lightbox' 4 export default VueEasyLightbox 5}
Way 2: alias
If you're using webpack: webpack alias docs
1// wepback.config.js 2module.exports = { 3 //... 4 resolve: { 5 alias: { 6 'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js', 7 }, 8 }, 9}; 10 11// in your component 12import VueEasyLightbox from 'vue-easy-lightbox' // work
Or vitejs: vitejs alias
1// vite.config.js
2import { defineConfig } from 'vite'
3
4export default defineConfig({
5 resolve: {
6 alias: {
7 'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'
8 }
9 }
10})
UMD
in browser1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="https://unpkg.com/vue@next"></script> 6 <script src="https://unpkg.com/vue-easy-lightbox@next/dist/vue-easy-lightbox.umd.min.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <div class=""> 11 <div v-for="(src, index) in imgs" :key="index" class="pic" @click="() => showImg(index)"> 12 <img :src="src" /> 13 </div> 14 </div> 15 <vue-easy-lightbox :visible="visibleRef" :imgs="imgs" :index="indexRef" @hide="onHide"></vue-easy-lightbox> 16 </div> 17 <script> 18 const { ref } = Vue 19 const app = Vue.createApp({ 20 setup() { 21 const visibleRef = ref(false) 22 const indexRef = ref(0) 23 const imgs = [ 24 'https://via.placeholder.com/450.png/', 25 'https://via.placeholder.com/300.png/', 26 'https://via.placeholder.com/150.png/', 27 { src: 'https://via.placeholder.com/450.png/', title: 'this is title' } 28 ] 29 const showImg = (index) => { 30 indexRef.value = index 31 visibleRef.value = true 32 } 33 const onHide = () => visibleRef.value = false 34 return { 35 visibleRef, 36 indexRef, 37 imgs, 38 showImg, 39 onHide 40 } 41 } 42 }) 43 // Registering VueEasyLightbox for your VueApp. 44 app.use(VueEasyLightbox) 45 app.mount('#app') 46 </script> 47 </body> 48</html>
1import Vue from 'vue' 2import VueEasyLightbox from 'vue-easy-lightbox' 3 4const app = Vue.createApp({ 5 // ... app options 6}) 7app.use(VueEasyLightbox) 8app.mount('#app')
1<template> 2 <div> 3 <button @click="showSingle">Show single picture.</button> 4 <button @click="showMultiple">Show a group of pictures.</button> 5 6 <vue-easy-lightbox 7 :visible="visibleRef" 8 :imgs="imgsRef" 9 :index="indexRef" 10 @hide="onHide" 11 ></vue-easy-lightbox> 12 </div> 13</template> 14 15<script> 16// If VueApp is already registered with VueEasyLightbox, there is no need to register it here. 17import VueEasyLightbox from 'vue-easy-lightbox' 18import { ref, defineComponent } from 'vue' 19 20export default defineComponent({ 21 components: { 22 VueEasyLightbox 23 }, 24 setup() { 25 const visibleRef = ref(false) 26 const indexRef = ref(0) // default 0 27 const imgsRef = ref([]) 28 // Img Url , string or Array of string 29 // ImgObj { src: '', title: '', alt: '' } 30 // 'src' is required 31 // allow mixing 32 33 const onShow = () => { 34 visibleRef.value = true 35 } 36 const showSingle = () => { 37 imgsRef.value = 'http://via.placeholder.com/350x150' 38 // or 39 // imgsRef.value = { 40 // title: 'this is a placeholder', 41 // src: 'http://via.placeholder.com/350x150' 42 // } 43 onShow() 44 } 45 const showMultiple = () => { 46 imgsRef.value = [ 47 'http://via.placeholder.com/350x150', 48 'http://via.placeholder.com/350x150' 49 ] 50 // or 51 // imgsRef.value = [ 52 // { title: 'test img', src: 'http://via.placeholder.com/350x150' }, 53 // 'http://via.placeholder.com/350x150' 54 // ] 55 indexRef.value = 0 // index of imgList 56 onShow() 57 } 58 const onHide = () => (visibleRef.value = false) 59 60 return { 61 visibleRef, 62 indexRef, 63 imgsRef, 64 showSingle, 65 showMultiple, 66 onHide 67 } 68 } 69}) 70</script>
1<vue-easy-lightbox ...> 2 <template v-slot:prev-btn="{ prev }"> 3 <button @click="prev">show the prev</button> 4 </template> 5 6 <template v-slot:next-btn="{ next }"> 7 <button @click="next">show the next</button> 8 </template> 9 10 <template v-slot:close-btn="{ close }"> 11 <button @click="close">close lightbox</button> 12 </template> 13 14 <template v-slot:toolbar="{ toolbarMethods }"> 15 <button @click="toolbarMethods.zoomIn">zoom in</button> 16 <button @click="toolbarMethods.zoomOut">zoom out</button> 17 <button @click="toolbarMethods.rotateLeft">Anticlockwise rotation</button> 18 <button @click="toolbarMethods.rotateRight">clockwise rotation</button> 19 </template> 20</vue-easy-lightbox>
Reference: Slots
Added in
v1.7.0
useEasyLightbox
provides some simple methods and states to help you use setup()
.
It is optional. You can customize your state.
Usage:
1<template> 2 <div> 3 <button @click="show">show</button> 4 <vue-easy-lightbox 5 :visible="visibleRef" 6 :imgs="imgsRef" 7 :index="indexRef" 8 @hide="onHide" 9 /> 10 </div> 11</template> 12 13<script> 14import { defineComponent } from 'vue' 15import VueEasyLightbox, { useEasyLightbox } from 'vue-easy-lightbox' 16 17export default defineComponent({ 18 components: { 19 VueEasyLightbox 20 }, 21 setup() { 22 const { 23 // methods 24 show, onHide, changeIndex, 25 // refs 26 visibleRef, indexRef, imgsRef 27 } = useEasyLightbox({ 28 // src / src[] 29 imgs: [ 30 'http://via.placeholder.com/250x150', 31 'http://via.placeholder.com/300x150', 32 'http://via.placeholder.com/350x150' 33 ], 34 // initial index 35 initIndex: 0 36 }) 37 38 return { 39 visibleRef, 40 indexRef, 41 imgsRef, 42 show, 43 onHide 44 } 45 } 46}) 47</script>
1export interface Img { 2 src?: string 3 title?: string 4 alt?: string 5} 6export interface UseEasyLightboxOptions { 7 /** 8 * image src/Img or list of images src/Img 9 * @default '' 10 */ 11 imgs: Img | string | (Img | string)[]; 12 /** 13 * initial index of imgList 14 * @default 0 15 */ 16 initIndex?: number; 17} 18export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => { 19 imgsRef: Ref<Img | string | (Img | string)[]>; 20 indexRef: Ref<number | undefined>; 21 visibleRef: Ref<boolean>; 22 show: (index?: Ref<number> | number | Event) => void; 23 onHide: () => void; 24 changeIndex: (index?: number) => void; 25};
Props
Name | Type | Default | Description |
---|---|---|---|
visible | Boolean | required | Control lightbox display |
imgs | String/String[]/ImgObject:{ src: string, title?: string, alt?: string }/ImgObject[] | required | Image's src / array of src / ImgObject:{ src, title?, alt? } / array of ImgObject / array of ImgObject. |
index | Number | 0 | Index of imgList |
loop | Boolean | false | Pass true to enable continuous loop mode. |
scrollDisabled (scroll-disabled) | Boolean | true | Pass true to disable scrolling when modal is visible. |
escDisabled (esc-disabled) | Boolean | false | By default, press the esc key to close Modal during presentation. |
moveDisabled (move-disabled) | Boolean | false | Pass true to disable image movement and enable swipe. |
rotateDisabled (rotate-disabled) | Boolean | false | Pass true to disable image rotation. |
zoomDisabled (zoom-disabled) | Boolean | false | Pass true to disable image zooming. |
pinchDisabled (pinch-disabled) | Boolean | false | Pass true to disable pinching. |
maskClosable (mask-closable) | Boolean | true | Enable or disable click mask to close vue-easy-lightbox. |
dblclickDisabled (dblclick-closable) | Boolean | false | Enable or disable double-click on img to zoom in/out. |
teleport | string | Element | - | Specify the mount node for vue-easy-lightbox. |
swipeTolerance (swipe-tolerance) | Number | 50 | Specify the number of pixel you have to swipe. |
zoomScale | Number | 0.12 | Specify the step between zoom levels. |
maxZoom | Number | 3 | Specify the maximum level of zoom scale. |
minZoom | Number | 0.1 | Specify the minimum level of zoom scale. |
rtl | Boolean | false | support RTL (right to left) languages |
Event
Name | Description | Return Value |
---|---|---|
hide | When you click modal mask or close Btn, component will emit this event | - |
on-error | Image loading error | event (event.target is not the image to be displayed) |
on-prev / on-prev-click | Emit when prev btn is clicked or when the user swiped right | (oldIndex, newIndex) |
on-next / on-next-click | Emit when next btn is clicked or when the user swiped left | (oldIndex, newIndex) |
on-index-change | Emit when imgs's index is changed | (oldIndex, newIndex) |
on-rotate | Emit when image rotate | deg: number (clockwise angle deg) |
Slot & Scoped Slot
Slot Name | Slot Props | Slot Props Type | Description |
---|---|---|---|
prev-btn | prev | Function | Show the prev img |
next-btn | next | Function | Show the next img |
close-btn | close | Function | Close modal |
toolbar | toolbarMethods: { zoomIn, zoomOut, rotate(rotateLeft), rotateLeft, rotateRight } | { Function } | Zoom in, zoom out, rotate(rotateLeft), rotateLeft, rotateRight |
loading | - | - | Loading icon |
onerror | - | - | Error Placeholder |
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 2/13 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
157 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More