Magnifying Glass Image Zoom Effect In Vue - Magnifier

Install & Download:

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

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
  }
}