Display an array of images using the vue images plugin


Almost everyone who works in front-end development has been in need of a way to display images. Vue.js makes everything easier and so the members of the community by creating plugins to make implementing features a breeze. The moment you find your self in need of displaying multiple images in a Vue app, look for vue-images. A simple, responsive Lightbox component for Vue.js to display an array of images.


  • Mobile friendly
  • Thumbnail navigation
  • Responsive design



Import using module:

// Install using npm
npm install vue-images --save
// Include stylesheet
// In ES6 module
import vueImages from 'vue-images'

Import using script tag:

<link rel="stylesheet" href="../node-modules/vue-images/dist/vue-images.css" charset="utf-8">
<script src="../node-modules/vue-images/dist/vue-images.js"></script>


import vueImages from 'vue-images/dist/vue-images'

export default {
  data () {
    return {
      images: [
          imageUrl: 'http://i.imgur.com/2ZFcyk9.png',
          caption: 'Photo by 1'
          imageUrl: 'http://i.imgur.com/Otaxjzf.jpg',
          caption: 'Photo by 2'
          imageUrl: 'http://i.imgur.com/zaJgzqQ.jpg',
          caption: 'Photo by 3'
          imageUrl: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/3.jpg',
          caption: 'Photo by 4'
  components: {

Then use it in your template

<vue-images :imgs="images">

Result of the above code:

More options are available to customize it further:


Property Type Default Description
images array undefined Required. An array of objects containing valid src and srcset values of img element
modalclose bool true Allow users to exit the lightbox by clicking the backdrop
keyinput bool true Supports keyboard input - esc, ←, and →
mousescroll bool true Supports mouse scroll
showclosebutton bool true Optionally display a close X button in top right corner
showcaption bool true Optionally display a caption under the image
imagecountseparator string ' of ' Custom separator for the image count
showimagecount bool true Optionally display image index, e.g., "3 of 20"
showthumbnails bool false Optionally display thumbnails beneath the Lightbox

Code and Documentantion are available on GitHub.