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
});
app.mount("#app");

2. Add your image to the VImageMagnifier component.

<template>
  <VImageMagnifier 
    src="/path/to/image.png"
   />
</template>

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;

Preview:

Download Details:

Author: fchancel

Live Demo: https://github.com/fchancel/v-image-magnifier

Download Link: https://github.com/fchancel/v-image-magnifier/archive/refs/heads/main.zip

Official Website: https://github.com/fchancel/v-image-magnifier

Install & Download:

# NPM
$ npm i v-image-magnifier