Vue Inner Image Zoom Component

An inner zoom Vue.js component that allows the user to click/tap to zoom-in on an image.

The image can also be moved by dragging on touch devices and by either dragging or hover panning on non-touch devices.

The component supports responsive images and optional fullscreen zoom on mobile.

How to use it:

1. Import and register the component.

import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css';
import InnerImageZoom from 'vue-inner-image-zoom';
export default {
  components: {
    'inner-image-zoom': InnerImageZoom

2. Add the inner-image-zoom component to the template and define the path to orginal/preview images as follows:

  zoomSrc="/path/to/zoom-image.jpg" />

3. Available component props to config the zoom behavior.

moveType: {
  type: String,
  default: 'pan' // or 'drag'
zoomType: {
  type: String,
  default: 'click'
src: {
  type: String,
  required: true
srcSet: String,
sizes: String,
sources: Array,
width: Number,
height: Number,
hasSpacer: Boolean,
zoomSrc: String,
zoomScale: {
  type: Number,
  default: 1
zoomPreload: Boolean,
alt: String,
fadeDuration: {
  type: Number,
  default: 150
fullscreenOnMobile: Boolean,
mobileBreakpoint: {
  type: Number,
  default: 640
hideHint: Boolean,
hideCloseButton: Boolean,
className: String,
afterZoomIn: Function,
afterZoomOut: Function


Vue Inner Image Zoom Component


v2.0.0 (12/02/2021)

  • Upgraded from Vue 2 to Vue 3.

v1.1.1 (09/28/2021)

  • fix(*): Fixed bug with zoom preload and fullscreen portal

v1.1.0 (05/13/2021)

  • Add preload zoom image option
  • Added options to hide close button and hint
  • Added width, height, and responsive spacer options
  • Added zoom on hover option
  • Added zoom scale option

Download Details:

Author: laurenashpole

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-inner-image-zoom

$ npm i vue-inner-image-zoom

Add Comment