# vuejs-magnifier

> A simple VueJS component for image magnifying / product zooming

Latest version **0.1.1** (published 2019-11-29) · 0 weekly downloads

## Install

```sh
npm install vuejs-magnifier
pnpm add vuejs-magnifier
yarn add vuejs-magnifier
bun add vuejs-magnifier
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-11-29 |
| First published | 2019-11-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ali-sharafi |

## Links

- npm: https://www.npmjs.com/package/vuejs-magnifier
- npm.io page: https://npm.io/package/vuejs-magnifier

## Recent versions

- 0.1.1 (latest) — 2019-11-29
- 0.1.0 — 2019-11-29

## README

# vuejs-magnifier
A simple VueJS component for image magnifying / product zooming

## Demo
For a demo, please visit here: https://codepen.io/ali-sharafi/full/OJPLJgP

## Installation
**Npm:**

```shell
$ npm i vuejs-magnifier
```

## Live Playground

To run that demo on your own computer:

* Clone this repository
* `npm install`
* `npm run build` 
* `npm run storybook` 
* Visit `http://localhost:9001/`

## Usage

```html
  <!-- Vue Component -->
  <template>
    <magnifier 
    src="/uploads/pic_url" 
    :glass-width="50" 
    :glass-height="50"
    :width="450"
    :height="500"
    :zoom-level="3"
    />

  </template>

  <script>
    import Vue from 'Vue'
    import Magnifier from 'vuejs-magnifier'

    Vue.use(Magnifier)

    export default {
      ...
      ...
    }
  </script>
```

## Development

Check out the `package.json`s script section. There are 2 scripts:

- `npm run dev` - it will open browser and you can *play* with code
- `npm run build` - it will craete a module file in `production` mode

---
_Source: https://npm.io/package/vuejs-magnifier · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._