vue-it-bigger

Install the package using npm to add the lightbox component to your Vue 3 project.

npm install vue-it-bigger

To use the component, import LightBox and its corresponding CSS file in your script section, register it as a component, and pass a media array to the template.

import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'

export default {
  components: {
    LightBox,
  },
}

<LightBox :media="media"></LightBox>

The imageOverlay slot allows you to render content (like annotations) directly on top of the current image. This slot is only available for image slides; it is skipped for video and YouTube slides. Pointer events are off by default.

<LightBox
  ref="overlayLightbox"
  :media="media"
>
  <template v-slot:imageOverlay="{ currentMedia }">
    <MyAnnotationsOverlay :annotations="currentMedia.annotations" />
  </template>
</LightBox>

The customCaption slot allows you to completely control how the caption is rendered, providing access to the currentMedia object.

<LightBox
  ref="customCaptionLightbox"
  :media="media"
  :show-caption="true"
>
  <template v-slot:customCaption="slotProps">
    {{ slotProps.currentMedia.caption }}<br>
    There could be some description here.
  </template>
</LightBox>

The component emits several events during its lifecycle:

- `onOpened`: Emit when the lightbox is opened.
- `onClosed`: Emit when the lightbox is closed.
- `onLastIndex`: Emit when the current image is the last one of the list.
- `onFirstIndex`: Emit when the current image is the first one of the list.
- `onStartIndex`: Emit when the current image is at the `startAt` index.
- `onLoad`: Emit when there are `lengthToLoadMore` images left in the array.

You can interact with the lightbox programmatically using a component ref to call these methods:

| name | arguments | description |
|------|-----------|-------------|
| nextImage | () | Move to next image |
| previousImage | () | Move to previous image |
| closeLightBox | () | Close lightbox |
| showImage | (index) | Show the image at index |

Use slots to override default UI elements. Some slots provide data via slotProps.

| Slot | Description | Slot Props |
|------|-------------|------------|
| close | The content of the close button | None |
| footer | The content of the footer under the image | `current` (integer), `total` (integer) |
| previous | The previous button on the main image | None |
| next | The next button on the main image | None |
| customCaption | The caption of the current image | `currentMedia` (Object) |
| imageOverlay | Content rendered on top of the image (images only) | `currentMedia` (Object), `index` (integer) |
| videoIcon | The Icon used for videos | None |

The vue-it-bigger package provides a LightBox component as its default export. To use it in a Vue 3 application, import the package and register the component globally or locally. The package also automatically imports its required CSS styles.

import LightBox from 'vue-it-bigger';

// In your Vue app
const app = createApp(App);
app.component('LightBox', LightBox);
app.mount('#app');