Vue Image Zoomer

Lightweight responsive image zoom component for Vue.js 3 & 2, that also works on touch devices. Perfect for zooming on product images on an ecommerce website. For Vue 2 please check out the legacy version https://www.npmjs.com/package/vue-image-zoomer/v/legacy.

Works on hover(default) or click on mouse devices, tap to zoom on touch screens.

Performance and pageload is important, zoom images do not load until needed, so only the regular sized images load on pageload. Webp format also available with jpg/png backwards compatabilty for browsers that do not yet support webp. There is also an option to lazyload the regular image and breakpoints to have different res images on different screen sizes.

Zoom source is not needed but recommended for a sharper zoom, if there is no zoom image selected then the regular image will be zoomed by 2 by default.

Demo: https://samueljon.es/vue-image-zoomer

Installation

npm i vue-image-zoomer

Usage:

//global
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);

app.mount('#app');

//in component
import { VueImageZoomer } from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';

export default {
  name: 'App',
  components: {
    VueImageZoomer
  }
}

Also comes with a UMD version and css file if not using a module compiler in the dist folder.

Usage examples

<!-- Example without zoom image -->
<vue-image-zoomer 
    regular="path-to-regular.jpg" />

<!-- jpg example -->
<vue-image-zoomer 
    regular="path-to-regular.jpg" 
    zoom="path-to-zoom.jpg" />

<!-- png example -->
<vue-image-zoomer 
    regular="path-to-regular.png" 
    zoom="path-to-zoom.png" />

<!-- webp example -->
<vue-image-zoomer 
    regular="path-to-regular.jpg" 
    regular-webp="path-to-regular.webp"
    zoom="path-to-zoom.jpg"
    zoom-webp="path-to-zoom.webp" />

Placeholder

Placeholder slot, helps with CLS improvements & page jumping.

<vue-image-zoomer 
    regular="path-to-regular.jpg" 
    zoom="path-to-zoom.jpg">
    <img src="https://github.com/samjonesigd/vue-image-zoomer/raw/main/path-to-low-res-placeholder.jpg" />
</vue-image-zoomer>

Breakpoints

This option is an array of objects that allows you to have different images on different screen sizes. For example to load a higher res image on desktop.

Order of the objects must start from highest min width, e.g. in the example below we start with the 1200 min width then 992. This is the min width of the browser in pixels when that breakpoint will show.

Like without breakpoints, if using breakpoints, the zoom parameters aren't required but recommended for a higher quality zoom image, width and regular parameters are required. Addition parameters to the array are 'regularWebp' and 'zoomWebp' if using webp images(will be defaulted to standard if browser does not support webp).

<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-regular-992.jpg',
            zoom: 'path-to-zoom-992.jpg'
        }                       
    ]" />

<!-- webp example -->
<vue-image-zoomer 
    regular="path-to-regular.jpg" 
    regular-webp="path-to-regular.webp" 
    zoom="path-to-zoom.jpg"
    zoom-webp="path-to-zoom.webp" 
    :breakpoints="[
        {
            width: 1200,
            regular: 'path-to-regular-1200.jpg',
            regularWebp: 'path-to-regular-1200.webp',
            zoom: 'path-to-zoom-1200.jpg'
            zoomWebp: 'path-to-zoom-1200.webp'
        },
        {
            width: 992,
            regular: 'path-to-regular-992.jpg',
            regularWebp: 'path-to-regular-992.webp',
            zoom: 'path-to-zoom-992.jpg'
            zoomWebp: 'path-to-zoom-992.webp'
        }                       
    ]" />

All Options

The following props can be added to the html above

Events

The events that the component emits.

License

This project is licensed under the MIT License