A lightweight, zero dependency lightbox implementation for vuejs.

Out of the box vue-litebox is pretty ugly looking, but this is because it ships with the absolute minimum CSS in order to provide the lightbox functionality. The making it look pretty is left to the implementor as I find that one size doesn't always fit all.

Supports images as well as youtube and vimeo videos.


Install via npm

npm install vue-litebox --save

or include via a script tag for browser based projects

<script src=""></script>


NB If included via a script tag, the component will be regisered globally so the following import and components declarations in the example below won't be necesary.

import VueLitebox from 'vue-litebox'

var app = new Vue({
  el: '#app',
  components: { VueLitebox },
  data: {
      images: [
              title: 'My image title',
              src: '/images/03.png'
      showLitebox: false
  methods: {
      showLitebox() {
          this.showLitebox = true;
      hideLitebox() {
          this.showLitebox = false;
<div id="app">
    <vue-litebox v-if="showLitebox"
    <button type="button" @click="showLitebox">Show Litebox</button>


  • items: Array of url strings and/or objects with a src property
  • startAt: The index at which to start the lightbox
  • closeCaption: The caption to display on the close button. Defaults to 'Close'
  • prevCaption: The caption to display on the prev arrow button. Defaults to 'Previous'
  • nextCaption: The caption to display on the next arrow button. Defaults to 'Next'
  • loadingCaption: The caption to display whilst loading a media item. Defaults to 'Loading...'
  • videoRegex: The regex to match for video URLs which will displayed in a 16:9 ration iframe. Defaults to /|
  • closeOnEsc: Define whether to close the lightbox on Esc key press. Defaults to true
  • nextOnImageClick: Define whether clicking an image moves you to the next image. Defaults to true


  • close: Fired when the close button is clicked or Esc key is pressed with closeOnEsc enabled



Provide custom markup for the loading overlay

<div slot="loading">Loading...</div>


Provide custom markup for the close button

<button type="button" 
    slot="close" slot-scope="{ closeProps, closeEvents }" 
    v-bind="closeProps" v-on="closeEvents">x</button>


Provide custom markup for the prev button

<button type="button" 
    slot="prev" slot-scope="{ prevProps, prevEvents }" 
    v-bind="prevProps" v-on="prevEvents">&lt;</button>


Provide custom markup for the next button

<button type="button" 
    slot="next" slot-scope="{ nextProps, nextEvents }" 
    v-bind="nextProps" v-on="nextEvents">&lg;</button>


Provide custom markup for the next button

<figcaption slot="caption" slot-scope="{ captionProps, currentItem, currentItemIndex, totalItems }" 
    <div class="vlb-caption-title" v-if="currentItem.title">{{currentItem.title}}</div>
    <div class="vlb-caption-count">{{currentItemIndex + 1}}/{{totalItems}}</div>