Gathering detailed insights and metrics for @dogsquare/vue-easy-lightbox
Gathering detailed insights and metrics for @dogsquare/vue-easy-lightbox
A tiny lightbox component for Vue.js 3.0 🎉🎉 https://xiongamao.github.io/vue-easy-lightbox/
1.0.3
MIT
TypeScript
204.54 kB
Installations
npm install @dogsquare/vue-easy-lightboxDeveloper Guide
BETA
Typescript
Yes
Module System
ESM, UMD
Min. Node Version
>=14.18.3
Node Version
20.11.1
NPM Version
10.2.4
Releases
Unable to fetch releases
Languages
6
TypeScript
Vue
JavaScript
SCSS
HTML
Shell
TypeScript (66.88%)
Vue (13.22%)
JavaScript (9.44%)
SCSS (9.07%)
HTML (0.78%)
Shell (0.62%)
Developer
dgsqre
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
402 Commits
5 Branches
Updated on Apr 23, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.3
Package Id
@dogsquare/vue-easy-lightbox@1.0.3
Unpacked Size
204.54 kB
Size
43.51 kB
File Count
63
NPM Version
10.2.4
Node Version
20.11.1
Published on
Apr 23, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
58
@babel/core@babel/eslint-parser@babel/plugin-transform-class-properties@babel/plugin-transform-runtime@babel/preset-env@babel/preset-typescript@babel/runtime@babel/runtime-corejs3@commitlint/cli@commitlint/config-conventional@nuxt/kit@nuxt/schema@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-node-resolve@rollup/plugin-replace@rollup/plugin-terser@types/babel__core@types/node@typescript-eslint/eslint-plugin@typescript-eslint/parser@vitejs/plugin-vue@vitejs/plugin-vue-jsx@vue/babel-plugin-jsx@vue/babel-preset-app@vue/compiler-sfc@vue/eslint-config-typescript@vue/test-utilsautoprefixercasecommitizencore-jscz-giteslinteslint-plugin-importeslint-plugin-neslint-plugin-nodeeslint-plugin-promiseeslint-plugin-vuefs-extrahappy-domhuskylint-stagedlodashpostcsspostcss-importprettierrimrafrolluprollup-plugin-postcssrollup-plugin-vuesasstypescriptunbuildvitevitestvuevue-eslint-parser
vue-easy-lightbox
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .
Vue-easy-lightbox@1.xonly supports Vue.js 3, if you need Vue.js 2 version please check here.
Installation
Package managers
1$ npm install --save vue-easy-lightbox@next 2# OR 3$ yarn add vue-easy-lightbox@next
Direct Download
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>
Different Builds
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) |
External CSS Build
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'
TypeScript Checking error:
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})Usage
Using UMD in browser
1<!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>
Register VueApp component
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')
Basic Usage in SFC
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>
Use vue slot custom buttons or toolbar
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
Composables
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>
Type declaration
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};
Options
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 |
License
No vulnerabilities found.
No security vulnerabilities found.