Image Viewer Component For Vue - v-viewer

Install & Download:

# Vue 2
$ npm i v-viewer
# Vue 3
$ npm i v-viewer@next

Description:

An image viewer component for Vue 3 & 2, with support for rotation, scale, zoom and much more.

Basic Usage:

1. Import and register the v-viewer.

// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
const app = createApp(App)
app.use(VueViewer)
app.mount('#app')

// Vue 2
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)

2. Use the v-viewer as a directive.

<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    </div>
    <button type="button" @click="show">Click to show</button>
  </div>
</template>

// Vue 3
import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        images: [
          "1.jpg",
          "2.jpg",
          "3.jpg"
        ]
      };
    },
    methods: {
      show() {
        this.$viewerApi({
          images: this.images,
        })
      },
    },
})

// Vue 2
export default {
  data() {
    return {
      images: [
        "1.jpg",
        "2.jpg",
        "3.jpg"
      ]
    };
  },
  methods: {
    show() {
      this.$viewerApi({
        images: this.images,
      })
    },
  },
}

3. Use the v-viewer as a component.

<viewer :images="images">
  <img v-for="src in images" :key="src" :src="src">
</viewer>

4. Component props.

images: {
  type: Array,
  default: () => [],
},
rebuild: {
  type: Boolean,
  default: false,
},
trigger: {
  type: Object,
  default: null,
},
options: {
  type: Object as PropType<Viewer.Options>,
  default: () => null,
},