Display an array of images using the vue images plugin

vue-images

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.

Features:

• Mobile friendly
• Thumbnail navigation
• Responsive design

Example

Installation:

Import using module:

// Install using npm
npm install vue-images --save

// Include stylesheet
require('vue-images/dist/vue-images.css')

// 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>

Usage:

<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: {
    vueImages
  }
}
</script>

Then use it in your template

<vue-images :imgs="images">
</vue-images>

Result of the above code:

More options are available to customize it further:

Options

Code and Documentantion are available on GitHub.