Vue3 Zoomer

Vue3 Zoomer is a beautiful image viewer component for Vue.js projects, making it easy to create stunning zoomable images for ecommerce, art galleries, infographics, and any other image you need to zoom into.

Why Use Vue3 Zoomer?

• Customizable Zoom Behavior: Choose zoom type, trigger, scale, and step to fit your specific requirements.
• Touch Device Support: The component works seamlessly on both desktop and mobile devices, providing a smooth zooming experience across platforms.
• Multiple Zoom Components: Vue3 Zoomer offers a variety of zoom components to choose from, allowing you to select the one that best fits your project's needs.
• Typescript Support: The component is written in Typescript, ensuring type safety and a better developer experience.
• Easy Integration: Vue3 Zoomer is simple to set up and use in your Vue.js and Nuxt.js projects, making it a great choice for quickly adding image zooming capabilities to your application.

Installation

Install the package using npm, yarn, or bun:

npm install vue3-zoomer

Basic Usage

First, import the ZoomImg component:

import { ZoomImg } from "vue3-zoomer";

Then, use the ZoomImg component in your template:

<ZoomImg src="/image.png" zoom-type="move" :zoom-scale="3" />

Demo

Props

| Name | Type | Default | Description | | -------------- | -------------------- | ---------- | -------------------------------------------------------------------------- | | src | String | required | The source URL of the image to be zoomed. | | zoomScale | Number | 2 | The desired zoom scale of the image. | | trigger | "click" \| "hover" | "click" | The event that triggers the zoom functionality, either "click" or "hover". | | zoomType | "move" \| "drag" | "move" | The type of zoom interaction, either "move" or "drag". | | step | Number | - | The step value for the zoom scale. | | persist | Boolean | false | Whether the zoom state should persist on mouse leave. | | showZoomBtns | Boolean | false | Show controls to increase or decrease the zoom scale from buttons. | | showImgMap | Boolean | false | Whether to display the image map overlay. |

Magnifier

<Magnifier src="/image.png" zoom-type="move" :zoom-scale="3" />

Demo

Props

| Name | Type | Default | Description | | ----------- | -------- | ---------- | ----------------------------------------- | | src | String | required | The source URL of the image to be zoomed. | | zoomScale | Number | 2 | The initial zoom scale of the image. | | size | Number | 200 | The initial magnifier size. |

Events

| Name | Description | | ------- | --------------------------------------------------- | | load | Triggered when the image has successfully loaded. | | error | Triggered when there is an error loading the image. |

License

Licensed under the MIT license.