Minimal Image Viewer With Zoom And Rotate Support – vue-previewer

The Vue.js preview component that groups your images in a fullscreen gallery view and allows the visitor to switch between images with zoom, rotate, and fullscreen support.

How to use it:

1. Import and register the component.

import VuePreviewer from 'vue-image-previewer'
// or
<script src=""></script>
<script src="./dist/vue-image-previewer.js"></script>

2. Create a basic image viewer in your web app.

new Vue({
    el: '#app',
    components: { VuePreviewer: window.VuePreviewer },
    data() {
      return {
        options: {
          defaultWidth: '24%', 
          defaultHeight: '100px',
          // more previewer options here
        style: {
          width: '50%',
          // more styles here
        imgs: [
          // more images here
    template: `
      <vue-previewer :style="style" :images="imgs" mode="image" :options="options">
        <template v-slot:footer="{image}">{{}}</template>

3. All default options to config the image viewer.

Vue.use(VuePreviewer, {
  defaultWidth: '100px',
  defaultHeight: '75px',
  thumbnailStyle: {
    backgroundSize: 'cover'
  keyMap: {
    zoomin: '+',
    zoomout: '-',
    rotate: 'r',
    prev: 'ArrowLeft',
    next: 'ArrowRight'

Download Details:

Author: nullptru

Live Demo: /demo/image-viewer-zoom-rotate-previewer

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-image-previewer

$ npm install vue-image-previewer --save

Add Comment