# vue-js-sirv-viewer

> Sirv Media Viewer for Vue.js

Latest version **1.1.1** (published 2024-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-js-sirv-viewer
pnpm add vue-js-sirv-viewer
yarn add vue-js-sirv-viewer
bun add vue-js-sirv-viewer
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2024-07-11 |
| First published | 2022-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 148.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | sergey |
| Maintainers | mefistosss |
| Keywords | front-end, web, vue, vuejs, vue-js, sirv, viewer, sirv-media-viewer, vue-js-sirv-viewer, vue-viewer |

## Links

- npm: https://www.npmjs.com/package/vue-js-sirv-viewer
- Repository: https://github.com/Mefistosss/vue-js-sirv-viewer
- Homepage: https://github.com/Mefistosss/vue-js-sirv-viewer#readme
- Issues: https://github.com/Mefistosss/vue-js-sirv-viewer/issues
- npm.io page: https://npm.io/package/vue-js-sirv-viewer

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.13
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [vue-router](https://npm.io/package/vue-router.md) ^4.0.3

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2024-07-11
- 1.1.0 — 2024-04-10
- 1.0.0-beta.8 — 2022-04-10
- 1.0.0-beta.7 — 2022-04-09
- 1.0.0-beta.6 — 2022-04-01
- 1.0.0-beta.5 — 2022-03-31
- 1.0.0-beta.4 — 2022-03-30
- 1.0.0-beta.3 — 2022-03-29
- 1.0.0-beta2 — 2022-03-27
- 1.0.0-beta1 — 2022-03-27

## README

# Vue.js Sirv Media Viewer

[![Test](https://github.com/Mefistosss/vue-js-sirv-viewer/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/Mefistosss/vue-js-sirv-viewer/actions/workflows/test.yml)

# Deprecated please use [new version](https://www.npmjs.com/package/@sirv/sirvjs-vue)

Easy to use, highly customizable Vue.js Sirv Media Viewer library.

Copy and paste this script anywhere in your HTML, usually before ```</head>```
```
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
```
or you can use [npm module](https://www.npmjs.com/package/sirv-media-viewer-script)

## install
```
npm install --save vue-js-sirv-viewer
```
## register as plugin
```
import App from './App.vue'
import SirvMediaViewer from 'vue-js-sirv-viewer';

createApp(App)
    .use(SirvMediaViewer)
    .mount('#app');
```
## basic usage
```
<sirv-media-viewer
    :id='...'
    :data-src='...'
    data-options="fullscreen.enable:false;"
    :slides="[
        'https://demo.sirv.com/demo/snug/teal-b-throw.jpg',
        'https://demo.sirv.com/demo/snug/teal.spin',
        {
            src: 'https://demo.sirv.com/demo/snug/unpacked.jpg',
            type: 'image'
        }
    ]"
></sirv-media-viewer>
```
- `:id` - viewer id
- `:data-src` - using for `*.view` files, overrides `:slides`
- `data-options` - [viewer options](https://sirv.com/help/articles/sirv-media-viewer/)
- `:slides` - Array with slide sources. Sources can be String or Object.
String can be just url link
Object has additional props:
  * `id` - Slide id [String]
  * `src` - Source [String]
  * `dataOptions` - Local slide options [Object]
  * `type` - Type of slide [String]. The available props are: `spin`, `zoom`, `image`, `youtube`, `vimeo`, `video`, `html`
  * `dataThumbnailImage` - Custom thumbnail image [String]
  * `dataThumbnailHtml` - Custom thumbnail html [String]
  * `dataDisabled` - Disable slide [Boolean]
  * `dataSwipeDisabled` - Disable slide swipe [Boolean]
  * `dataHiddenSelector` - Hide selector [Boolean]
  * `dataPinned` - Pinned selector [String]. The available props are: `left`, `right`
  * `staticImage` - Static image [Boolean].

[Examples](https://test1.sirv.com/sergey/vue/index.html)

[Sirv Media Viewer documentation](https://sirv.com/help/articles/sirv-media-viewer/)

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