Lightbox
Full-screen image and video viewer with zoom, keyboard navigation, fullscreen, download, share, thumbnails, and a slide counter. Highly slot-driven for custom chrome.
Default
Pass an array of images and render thumbnails that open the lightbox.
Custom trigger
Use the #trigger scoped slot to open the lightbox from any element. Receives { open, openAt, items }.
Mixed image + video
Items can be images or { type: 'video', src, poster }. Videos auto-pause on slide change.
Minimal chrome
Hide the thumbnail strip, counter, and download button for a bare viewer.
API Reference
Props, events, and slots for each sub-component.
Lightbox
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | LightboxItem[] | [] | Slides to display (image or video objects). |
| open | boolean | false | Open state. Supports v-model:open. |
| index | number | 0 | Active slide index. Supports v-model:index. |
| loop | boolean | true | Wrap around at the ends. |
| limit | number | null | null | Cap how many thumbnails the built-in grid renders. |
| showThumbnails | boolean | true | Show the thumbnail strip. |
| showCounter | boolean | true | Show the n / total counter. |
| showFullscreen | boolean | false | Show the fullscreen toggle. |
| showShare | boolean | false | Show the share button. |
| zoomable | boolean | true | Allow zoom on the active image. |
| keyboard | boolean | true | Enable arrow-key and Escape navigation. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the viewer opens or closes. Enables v-model:open. |
| update:index | Fires when the active slide changes. Enables v-model:index. |
| change | Fires on slide change. Receives { index, item }. |
| download | Fires when a slide is downloaded. Receives { index, item }. |
Slots
| Slot | Description |
|---|---|
| trigger | Scoped slot for the opener. Receives { open, openAt, items }. |
| counter | Override the n / total counter. |
| actions | Override the action toolbar (download, share, fullscreen, close). |
| previous | Override the previous-slide control. |
| next | Override the next-slide control. |
| caption | Scoped slot for the caption. Receives { caption, item }. |
| thumbnails | Override the thumbnail strip. |
Sub-components (LightboxContent, LightboxImage, LightboxVideo, LightboxClose, LightboxCounter, LightboxNext, LightboxPrevious, LightboxThumbnails, ...)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Building blocks used internally and available for fully custom layouts. Each reads shared state from the Lightbox provider. See the component source for per-part props. |