Nefarious Pomegranate Magnate


    1.0.7 • 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


    Live demo

    Getting start

    Install boostrap,jQuery and popper.js (ignore these 2 steps if you already have)

    $ npm i bootstrap jquery popper.js

    Import to your main.js

    import 'bootstrap'; 
    import 'bootstrap/dist/css/bootstrap.min.css';

    After installing this dependencies

    $ npm i vue-cover-gallery --save

    Then imprort gallery to a vue component.

    import Gallery from "vue-cover-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 "vue-cover-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.


    npm i vue-cover-gallery

    DownloadsWeekly Downloads






    Unpacked Size

    38.9 kB

    Total Files


    Last publish


    • amem