Responsive And Customizable Image And Video Gallery – vue-gallery

A responsive, customizable, cross-platform gallery, carousel and lightbox component for Vue.js. Supports both images and videos.

Based on the Blueimp Gallery.

How To Use It:

1. Import the VueGallery module.

import VueGallery from 'vue-gallery';

2. Insert the component into your app template:

    <gallery :images="images" :index="index" @close="index = null"></gallery>
      v-for="(image, imageIndex) in images"
      @click="index = imageIndex"
      :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"

3. Render the image gallery on your app.

export default {
  data: function () {
    return {
      images: [
      index: null

  components: {
    'gallery': VueGallery

4. Possible props to customize the gallery.

  • images: an array of images
  • index: initial image displayed in the lightbox
  • options: blueimp-gallery options

5. Event handlers.

  • @open: fired on open
  • @opened: fired on opened
  • @slide: fired on slide
  • @slideend:: fired on slide end
  • @slidecomplete: fired complete
  • @close: fired on close
  • @closed: fired on closed





  • v2.0.4: blueimp instance is globally declared

Download Details:

Author: RobinCK

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-gallery

$ npm install vue-gallery --save

Add Comment