Create an image gallery with the Lightbox component for Vue.js


Add a simple gallery for showcasing your favorite photos, with the native lightbox component for Vue.js. Just install the component and pass your array of images and you 'll have a gallery ready for display.

Checkout the Interactive Demo.


Installation & Usage

yarn add vlightbox

Register the component

import lightbox from 'vlightbox'

Image settings

Accepts array containing image objects, properties accepted are caption and src.

images: [
        src: '',
        caption: 'Image 1',
        src: '',

In the markup:

<div id="app">
        title="Feed Gallery"

As a result

Other available options are:

  • Remove all styles to the image gallery, overlay not included :resetstyles="false"
  • Add h1 with title above gallery title="Demo Gallery"
  • Loop back to the first image when at the end of the gallery :loop="true"
  • Show next, back and close buttons on overlay :nav="true"
  • Show captions on images with the caption property :caption="true"

If you would like to use and contribute to vlightbox, find the repo on GitHub.