vue-easy-lightbox

> A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .


English | 中文文档 | Homepage

> Vue-easy-lightbox@1.x only supports Vue.js 3, if you need Vue.js 2 version please check here.

Installation

$3

``shell
$ npm install --save vue-easy-lightbox@next


OR

`html



`

$3

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.

$3

> 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/.

`js
import VueEasyLightbox from 'vue-easy-lightbox/external-css'
// or
import VueEasyLightbox from 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'

// you need to import css
import 'vue-easy-lightbox/external-css/vue-easy-lightbox.css'
// or
import '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:

`ts
declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' {
import VueEasyLightbox from 'vue-easy-lightbox'
export * from 'vue-easy-lightbox'
export default VueEasyLightbox
}
`

Way 2: alias

If you're using webpack: webpack alias docs

`js
// wepback.config.js
module.exports = {
//...
resolve: {
alias: {
'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js',
},
},
};

// in your component
import VueEasyLightbox from 'vue-easy-lightbox' // work
`

Or vitejs: vitejs alias

`js
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
resolve: {
alias: {
'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'
}
}
})
`

Usage

$3

`html










`javascript
import Vue from 'vue'
import VueEasyLightbox from 'vue-easy-lightbox'

const app = Vue.createApp({
// ... app options
})
app.use(VueEasyLightbox)
app.mount('#app')
`

$3

`html



`

$3

`html





`

Reference: Slots

$3

> 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:

`html



`

#### Type declaration

`ts
export interface Img {
src?: string
title?: string
alt?: string
}
export interface UseEasyLightboxOptions {
/**
* image src/Img or list of images src/Img
* @default ''
*/
imgs: Img | string | (Img | string)[];
/**
* initial index of imgList
* @default 0
*/
initIndex?: number;
}
export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
imgsRef: Ref;
indexRef: Ref;
visibleRef: Ref;
show: (index?: Ref | number | Event) => void;
onHide: () => void;
changeIndex: (index?: number) => void;
};
``

Options

Props

Event

Slot & Scoped Slot

License

MIT