# vue-modal-images

> ## Features

Latest version **0.1.3** (published 2022-11-16) · 0 weekly downloads

## Install

```sh
npm install vue-modal-images
pnpm add vue-modal-images
yarn add vue-modal-images
bun add vue-modal-images
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-11-16 |
| First published | 2022-11-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yeg2799 |

## Links

- npm: https://www.npmjs.com/package/vue-modal-images
- npm.io page: https://npm.io/package/vue-modal-images

## Recent versions

- 0.1.3 (latest) — 2022-11-16
- 0.1.2 — 2022-11-16
- 0.1.1 — 2022-11-15
- 0.1.0 — 2022-11-15

## README

# vue-modal-image

## Features

- Zero dependencies.
- Esc, Enter & click outside the image close the lightbox
- User can zoom & move the image or download the highest quality one
- Download, Zoom and Rotate -buttons can be hidden.
- Image alt shown as title

## Simple API

## Getting started

### Installation

```shell
npm install vue-modal-image
```
Add dependencies to your `main.js`:

```javascript
import Vue from 'vue'
import ModalImage from 'vue-modal-image'

Vue.use(ModalImage)
```

Add the global component to your `App.vue`:

```js
<ModalImage ext="https://i.imgur.com/" source="V4fWcfi.jpg" description="description" hideDownload />;
```

| Prop                   | Type      | Description                                                                                                   |
| ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------- |
| `alt`                  | `String`  | Optional. `alt` for the the heading text in image.                                                       |
| `description`          | `String`  | Optional. `description` for the the description text in ModalImage.                                           |
| `ext`                  | `URL`     | `ext` for the image.                                                                                          |
| `source`               | `URL`     | `source` for the image.                                                                                       |
| `hideDownload`         | `boolean` | Optional. Set to `false` to hide download-button from the ModalImage.                                         |
| `hideZoom`             | `boolean` | Optional. Set to `false` to hide zoom-button from the ModalImage.                                             |
| `hideZoom`             | `boolean` | Optional. Set to `false` to show rotate-button within the ModalImage.                                         |

[npm]: https://www.npmjs.com/package/vue-modal-images

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