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: { // pan or drag
  type: String,
  default: 'pan'
srcSet: String,
sizes: String,
sources: Array,
alt: String,
fadeDuration: {
  type: Number,
  default: 150
fullscreenOnMobile: Boolean,
mobileBreakpoint: {
  type: Number,
  default: 640
className: String,
afterZoomIn: Function,
afterZoomOut: Function


Vue Inner Image Zoom Component

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

You Might Be Interested In:

Add Comment