Vue-Magnifier: a simple VueJS 2.x component

For a demo, please visit here: https://codepen.io/zeknoss/pen/vaxGKe

Vue Magnifier is free component for basic image zoom practices. You can use it as follows:

<vue-magnifier src="default-image-source" src-large="large-image-source"></vue-magnifier>

To customize the look and feel of the component, just edit the vue component file, or the provided standalone vue-magnifier.scss or the vue-magnifier.css file.

Load standalone from CDN

<script src="https://cdn.jsdelivr.net/gh/zeknoss/[email protected]/dist/js/vue-magnifier.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zeknoss/[email protected]/dist/css/vue-magnifier.css" media="screen" />

Load standalone from local

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

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.