Load image galleries using the v img plugin

v-img

This plugin for Vue.js projects, v-img, is a pure Vue image gallery created by fahrenq, which will allow you to setup image galleries in one group or more. Using the v-img directive inside the img tag and specifying directive arguments if you need to, you can scroll through your images in a breeze.

Image gallery has never been that easy to setup

Live Demo

Example

Lets see a small implementation example.

Browser support

Start by installing the plugin with yarn or npm

yarn add v-img

or

npm install v-img --save

Then use plugin 

import Vue from 'vue'
import VueImg from 'v-img'

Vue.use(VueImg)

Add the v-img directive to the image tags in your templates

<img v-img src="...">

If you would like to create seperate galleries you can specify a different name along with the directive and pass additional arguments:

<img v-img:group1 src="...">
<img v-img:group1 src="...">
<img v-img:group1 src="...">

<img v-img:group-2="{ cursor: 'zoom-in' }" src="...">
<img v-img:group-2="{ cursor: 'zoom-in' }" src="...">

The above will render 2 galleries with a different set of images.

That’s it, you can give the plugin a try (GitHub repo) if you are looking for an easy way to display images in galleries in your projects.