vue-inner-image-zoom

A Vue.js component for magnifying an image within its parent container 🔎
135,953 36
vue vue-component image responsive ecommerce photo zoom magnify enlarge pdp
Install
npm install vue-inner-image-zoom
Latest Version:3.0.3
Vue:3
Older releases:2
License:MIT
Last Updated:Oct 21, 2026
Links: GitHub  ·  npm
Maintainer: laurenashpole

vue-inner-image-zoom

GitHub Actions NPM

A lightweight Vue component for magnifying an image within its original container.

Demos | Changelog

Installation

Note: Version 2.0.0 upgrades the component to support Vue 3. To use this package with older versions of Vue, install using npm install vue-inner-image-zoom@1.1.1 or yarn add vue-inner-image-zoom@1.1.1 instead of the instructions below.

NPM

npm install vue-inner-image-zoom

Yarn

yarn add vue-inner-image-zoom

TypeScript

Type declarations were added with version 3.0.0.

Usage

Import the component and include in your template:

import InnerImageZoom from 'vue-inner-image-zoom';

...

export default {
  components: {
    'inner-image-zoom': InnerImageZoom
  }
}

...

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

Props

Prop Type Default Description
src string (Required) URL for the original image.
sources array A list of image sources for using the picture tag to serve the appropriate original image (see below for more details).
width number Width attribute for original image.
height number Height attribute for original image.
hasSpacer boolean false If true, gets the original image's aspect ratio based on the width and height props and creates a spacer to prevent cumulative layout shift.
imgAttributes object Img and global attributes for the original image (excluding src, width, height, and style which are set elsewhere).
zoomSrc string URL for the larger zoom image. Falls back to original image src if not defined.
zoomScale number 1 Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
zoomPreload boolean false If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave.
moveType pan or drag pan The user behavior for moving zoomed images on non-touch devices.
zoomType click or hover click The user behavior for triggering zoom. When using hover, combine with zoomPreload to avoid flickering on rapid mouse movements.
fadeDuration number 150 Fade transition time in milliseconds. If zooming in on transparent images, set this to 0 for best results.
fullscreenOnMobile boolean false Enables fullscreen zoomed image on touch devices below a specified breakpoint.
mobileBreakpoint number 640 The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.
hideCloseButton boolean false Hides the close button on touch devices. If set to true, zoom out is triggered by tap.
hideHint boolean false Hides the magnifying glass hint.
className string Custom classname for styling the component.
afterZoomIn () => void Function to be called after zoom in.
afterZoomOut () => void Function to be called after zoom out.

Sources

This prop accepts an array of objects which it uses to create a picture tag and source elements. The component looks for the following optional properties and you can find additional details on responsive images here:

Prop Type Default Description
srcSet string Srcset attribute for source tag.
sizes string Sizes attribute for source tag.
media string An attribute containing a media condition for use with the srcset.
type string An image MIME type. This is useful for using newer formats like WebP.

Issues

Please submit bugs or requests on the GitHub issues page and make sure to use the vue label.

License

MIT

Related Packages

@diracleo/vue-enlargeable-image

A Vue component that, when clicked, will enlarge an image from thumbnail to full...

5,506 14
enlarge image vue zoom animated gallery img portfolio vue-enlargeable-image
vue-image-zoomify

An image zooming feature for Vue, enabling zoom in and out functionalities.

3,332 0
image vue zoom
vue-image-zoomer

Responsive image zoom component for Vue.js 3, that also works on touch devices....

204,302 116
image magnify vue zoom lazyload product typescript vue3 webp zoomer
vue-zoomer

Zoom the image or other thing with mouse or touch

260,824 150
image vue zoom zoomer
vue-image-magnifier

setup

6,735 15
image vue zoom imagnifier

Version History

Version Released License
3.0.3 MIT
3.0.2 MIT
3.0.1 MIT
3.0.0 MIT
2.0.0 MIT