Magnifying Glass Image Zoom Effect In Vue – Magnifier

Magnifier is a Vue.js image zoom component that applies a magnifying glass effect to any image.

Basic usage:

1. Import the Magnifier component.

import VueMagnifier from "@/components/vue-magnifier";

// or
<script src="/path/to/js/vue-magnifier.js"></script>
<link rel="stylesheet" href="/path/to/css/vue-magnifier.css" media="screen" />

2. Add the component to the page.

<vue-magnifier 
  src="/path/to/small.jpg" 
  src-large="/path/to/large.jpg">
</vue-magnifier>

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

Preview:

Download Details:

Author: zeknoss

Live Demo: /demo/magnifying-glass-image-zoom-effect

Download Link: https://github.com/zeknoss/vue-magnifier/archive/master.zip

Official Website: https://github.com/zeknoss/vue-magnifier

Install & Download: