Toggle Sidebar B
AppearanceLight & dark mode D

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.

Replay preview

Custom trigger

Use the #trigger scoped slot to open the lightbox from any element. Receives { open, openAt, items }.

Replay preview

Mixed image + video

Items can be images or { type: 'video', src, poster }. Videos auto-pause on slide change.

Replay preview

Minimal chrome

Hide the thumbnail strip, counter, and download button for a bare viewer.

Replay preview

API Reference

Lightbox

PropTypeDefaultDescription
itemsLightboxItem[][]Slides to display (image or video objects).
openbooleanfalseOpen state. Supports v-model:open.
indexnumber0Active slide index. Supports v-model:index.
loopbooleantrueWrap around at the ends.
limitnumber | nullnullCap how many thumbnails the built-in grid renders.
showThumbnailsbooleantrueShow the thumbnail strip.
showCounterbooleantrueShow the n / total counter.
showFullscreenbooleanfalseShow the fullscreen toggle.
showSharebooleanfalseShow the share button.
zoomablebooleantrueAllow zoom on the active image.
keyboardbooleantrueEnable arrow-key and Escape navigation.
EventDescription
update:openFires when the viewer opens or closes. Enables v-model:open.
update:indexFires when the active slide changes. Enables v-model:index.
changeFires on slide change. Receives { index, item }.
downloadFires when a slide is downloaded. Receives { index, item }.
SlotDescription
triggerScoped slot for the opener. Receives { open, openAt, items }.
counterOverride the n / total counter.
actionsOverride the action toolbar (download, share, fullscreen, close).
previousOverride the previous-slide control.
nextOverride the next-slide control.
captionScoped slot for the caption. Receives { caption, item }.
thumbnailsOverride the thumbnail strip.

Sub-components (LightboxContent, LightboxImage, LightboxVideo, LightboxClose, LightboxCounter, LightboxNext, LightboxPrevious, LightboxThumbnails, ...)

PropTypeDefaultDescription
classstringBuilding 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.