1.1.4 • Public • Published


This is a vue 2 based modern gallery which can be used instead of a cover photo. First 5 images in the array will be displayed in the cover view; however, if the array has less than 5 images, first image will be displayed as the cover photo and other imgaes can be viewed by clicking on an image or invoking the 'View Photos' button.

This Gallery is a modification of vue-Gallery

alt text

Getting start

$ npm i npm-moa-gallery --save

Then imprort gallery to a vue component.

import Gallery from "npm-moa-gallery"

Then include Gallery as a child component

components: {

Include the the Gallery in HTML divition (give image array as an Input)

<Gallery :images="images" ></Gallery>

Structure of the image array (href is required other 2 fields optional)

            title: "",
            description: "",
            href: ""

Example Vue-2 component

  <Gallery :images="images" ></Gallery>
import Gallery from "npm-moa-gallery"
export default {
  name: "Example",
  components: {
  data() {
    return {
      images: [
            title: "title 1",
            description: "des 1",
            href: ""},
             title: "title 2",
            description: "des 2",
            href: ""
<style scoped>


You can import directly from npm or clone from git hub modify and build.

GitHub repository.

  • clone from Github.
  • install dependencies.
npm install
  • For live testing excute below line from the root directory.
vue serve ./src/example/example.vue
  • Do your modifications.
  • Run a build
npm run build
  • You can use build files in dist folder

  • You should install blueimp-gallery (dependency) exteranally for this case.

npm i blueimp-gallery --save
import * as Gallery from "./gallery.umd.js (path to gallery.umd.js)"
  • Then do all things, same as Getting start section.

Package Sidebar


npm i npm-moa-gallery

Weekly Downloads






Unpacked Size

37.2 kB

Total Files


Last publish


  • amem