Simple Image Lightbox for Vue.js

No dependencies required!

Inspired by vue-pure-lightbox, however I needed a framework that allowed for a gallery of thumbnails as well as filtering functionality.

Installation and Setup

Via NPM:

npm i vue-my-photos --save

Then in your main.js file:

import Lightbox from 'vue-my-photos'
Vue.component('lightbox', Lightbox);

Via CDN:

<!-- In <head> -->
<meta rel="stylesheet" href="">
<!-- In <body>, after Vue import -->
<script src=""></script>

Then in your App:


    new Vue({
        // ...


Simply initiate a lightbox component with the 'lightbox' tag and unique ref name:

<lightbox id="mylightbox"

Each thumbnail in the gallery then registers a click event, passing the name of the photo:


And add the showLightbox (or w/e name you choose) method to your vue page:

showLightbox: function(imageName) {

To update which images show within the lightbox, update the filter string like so:

updateFilter(filterName) {
    this.galleryFilter = filterName;


Property Type Value
images (Required) array Array of objects with image data (example below)
filter (Optional - Default: "all") string String to filter on specific images (Ex: "nature")
directory (Optional - Default: "") string Path to location of images (Ex: "/src/assets/")
timeoutDuration (Optional - Default: 3000) integer duration in ms of key/mouse inactivity before caption disappears

Example of images array:

var images = [{'name':'mountains.jpg', 'alt':'The Dolomites', 'filter':'nature' },
              {'name':'bird.jpg', 'alt':'It is a bird', 'filter':'animals' }];


  • 'name' value should include the file extension
  • 'alt' is optional
  • 'filter' is optional if you don't pass/update the filter value on the lightbox component