Interactive Image Zoom Plugin – v-image-magnifier

An open-source Vue 3 plugin that adds interactive image zoom functionality to your Vue projects.

It enables users to zoom into an image simply by hovering over it, offering an enlarged and detailed view of the corresponding part of the image.

How to use it:

1. Import and register the v-image-magnifier plugin.

import { createApp } from "vue";
import VImageMagnifier from "v-image-magnifier";
const app = createApp(App);
app.use(VImageMagnifierPlugin, {
  // options here

2. Add your image to the VImageMagnifier component.


3. Available props.

zoomSize: 100,
zoomFactor: 1.8,
deactivate: false,
backgroundColor: "#ffff",
cursorNone: true,
magnifiedBorderRadius: 50,
magnifiedBorderSize: 4,
magnifiedBorderColor: "#ffff",
magnifiedBorderStyle: "solid",
zIndex: 99,
boxShadow: "0 5px 10px -2px rgba(0, 0, 0, 0.5)",
magnifiedTransition: "opacity 0.2s",
fitContent: true,

4. Available plugin options.

src: string;
imgClass?: string;
zoomSize?: number;
zoomFactor?: number;
backgroundColor?: string;
cursorNone?: boolean;
magnifiedBorderRadius?: number;
magnifiedBorderSize?: number;
magnifiedBorderColor?: string;
magnifiedBorderStyle?: string;
zIndex?: number;
boxShadow?: string;
magnifiedTransition?: string;
altImage?: string;
deactivate?: boolean;
fitContent?: boolean;



Download Details:

Author: fchancel

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i v-image-magnifier

Add Comment