npm install vue-product-zoomer

import ProductZoomer from 'vue-product-zoomer' Vue.use(ProductZoomer)  <ProductZoomer   :base-images="images"   :base-zoomer-options="zoomerOptions" /> 

{     {       'thumbs':    // optional, if not present will use normal_size instead       [         {'id':'unique id', 'url': 'image url'},         {'id':'unique id', 'url': 'image url'}       ]     },     {       'normal_size':  // required       [         {'id':'unique id', 'url': 'image url'},         {'id':'unique id', 'url': 'image url'}       ]     },     {       'large_size':    //optional, if not present will use normal_size instead       [         {'id':'unique id', 'url': 'image url'},         {'id':'unique id', 'url': 'image url'}       ]     }  }

{     zoomFactor: 3, // scale for zoomer     pane: 'pane', // three type of pane ['pane', 'container-round', 'container']     hoverDelay: 300, // how long after the zoomer take effect     namespace: 'zoomer', // add a namespace for zoomer component, useful when on page have mutiple zoomer     move_by_click:false // move image by click thumb image or by mouseover     scroll_items: 5, // thumbs for scroll     choosed_thumb_border_color: "#bbdefb", // choosed thumb border color     scroller_button_style: "line",     scroller_position: "left",     zoomer_pane_position: "right" }