Vue Image Zoomer

Lightweight responsive image zoom component for Vue.js 3, that also works on touch devices. Perfect for zooming on product images on an ecommerce website. For Vue 2 version please see the legacy version

Default Hover Zoom

<vue-image-zoom 
    regular="/img/sky.jpg" 
    zoom="/img/sky-zoom.jpg" 
    :zoom-amount="3" 
    img-class="img-fluid"
    alt="Sky"
    @on-zoom="zoom = true"
    @off-zoom="zoom = false" />

    Zoomed: {{ zoom }}

Zoomed: false

Default Hover Zoom with placeholder

This helps fix CLS issues, you could use a low res version of the regular image.

<vue-image-zoom 
    regular="/img/sky.jpg" 
    zoom="/img/sky-zoom.jpg" 
    :zoom-amount="3" 
    img-class="img-fluid"
    alt="Sky">
    <img src="/img/sky.jpg" img-class="img-fluid"/>
</vue-image-zoom>

Default Hover Zoom with just a regular image

Here you can see it is not as sharp as using a zoom image

<vue-image-zoom 
    regular="/img/sky.jpg" 
    img-class="img-fluid"
    alt="Sky"
    close-pos="top-right"
    message-pos="top" />

Click To Zoom

<vue-image-zoom 
    regular="/img/grass.jpg" 
    zoom="/img/grass-zoom.jpg" 
    :zoom-amount="3"
    :click-zoom="true"
    img-class="img-fluid"
    alt="Grass" />

Custom Messages and default zoom amount

<vue-image-zoom 
    regular="/img/balls.jpg" 
    zoom="/img/balls-zoom.jpg"
    hover-message="Custom hover message"
    touch-message="Custom touch message"
    img-class="img-fluid"
    alt="Ball pool" />

Breakpoints

Browser width 1200px or above will show black & white sky image, 992 and above will show sky inverted. Below 992px will be original sky image set.

Width order must start from highest min width.

<vue-image-zoom 
  regular="/img/sky.jpg" 
  zoom="/img/sky-zoom.jpg" 
  :zoom-amount="3" 
  img-class="img-fluid"
  alt="Sky"
  :breakpoints="[
    {
      width: 1200,
      regular: '/img/sky-bw.jpg',
      zoom: '/img/sky-zoom-bw.jpg'
    },
    {
    width: 992,
      regular: '/img/sky-inverted.jpg',
      zoom: '/img/sky-zoom-inverted.jpg'
    }           
  ]" />