Home Image An Interactive Vue Component That Displays Multiple Images

An Interactive Vue Component That Displays Multiple Images

Image webcodeflow · February 21, 2022 · Comments off

Image wall is an interactive Vue component that displays multiple images in a row. Hovering the mouse over an image will expand the view of that image.

vue image gallery, vue gallery example, vue3 image gallery, vue gallery slideshow, vue gallery demo

Responsive Cascading Grid Layout Like Masonry Brick Wall | BrickCols.js

How to make use of it:

Install

npm install vue-template-compiler --save-dev
npm install vue-image-wall

or

yarn add vue-template-compiler -D
yarn add vue-image-wall

Usage

<template>
  <div id="app">
    <vue-image-wall :link-images="images"></vue-image-wall>
  </div>
</template>

<script>
  import VueImageWall from 'vue-image-wall';

  export default {
    name: 'app',
    components: { VueImageWall },
    data: function () {
      return {
        images: [
          '/assets/0.jpg',
          '/assets/1.jpg',
          '/assets/2.jpg',
          '/assets/3.jpg',
          '/assets/4.jpg'
        ],
      };
    },
  };
</script>

Vue Image Wall Component Plugin/Github