Vue-magic-zoom NPM

🔎 Vue Magic Zoom

An easy to use image zoom lens library for Vue.js 3

npm install --save vue-magic-zoom

or

yarn add vue-magic-zoom

or

pnpm i vue-magic-zoom

import { MagicZoom } from "vue-magic-zoom"

<MagicZoom src="/default-image.jpg" />

This will render the image and when you hover over it, it will show a little lens with a zoomed in version

Prop	Type	Default	Description
src	String	-	Required. This is the path to the image that you want to have the ability to zoom on.
zoomScale	Number	4	Optional. This Prop is used to determin the magnification scale of the magnifing lens.
aspectRatio	Number	16/9	Otpional. This can be provided as a fraction like: `16/9`
fit	String	`contain`	Otpional. Determines aspect ratio of image
lensSize	Number	200	Optional. Size of lens in pixels, lens will be a square
width	Number`\\|`String	`100%`	Optional. Determines width of image
height	Number`\\|`String	`100%`	Optional. Determines height of image
alt	String	`Zoomed Image`	Optional. alt of image
modifier	String	''	Optional. KeyCode of a KeyboardEvent (ex.:`ControlLeft`) this will make it so that the lens only appears if the modifier key is pressed