<vue-image-zoomer regular="path-to-regular.jpg" zoom="path-to-zoom.jpg" :breakpoints="[ { width: 1200, regular: 'path-to-regular-1200.jpg', zoom: 'path-to-zoom-1200.jpg' }, { width: 992, regular: 'path-to-regula
Image Zoom Component "vue-image-zoomer is a lightweight responsive image zoom component for Vue 2/3 that also works on touch devices. It's perfect for zooming on product images on an ecommerce website. It works on hover (default) or click on mouse devices, tap to zoom on touch screens...
npm i vue-image-zoomer Usage: //globalimport{createApp}from'vue';importAppfrom'./App.vue'importVueImageZoomerfrom'vue-image-zoomer'import'vue-image-zoomer/dist/style.css';constapp=createApp(App);app.use(VueImageZoomer);app.mount('#app');//in componentimport{VueImageZoomer}from'vue-image...
Zoom the image or other thing with mouse or touch For Vue 3 This library has released a Vue 3 beta versionhere. Demo Single Image-(src) Gallery-(src) Usage Install: npm install vue-zoomer Import and register globally: importVuefrom'vue'importVueZoomerfrom'vue-zoomer'Vue.use(VueZoomer) ...
1. Import and register the image zoomer. import { createApp } from 'vue'; import App from './App.vue' import VueImageZoomer from 'vue-image-zoomer' import 'vue-image-zoomer/dist/style.css'; const app = createApp(App); app.use(VueImageZoomer); ...