Vue components for Sirv.js

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 loadSMVScript module

install

npm install --save @sirv/sirvjs-vue

register as plugin

import App from './App.vue'
import SirvjsVue from '@sirv/sirvjs-vue';

createApp(App)
    .use(SirvjsVue)
    .mount('#app');

Sirv Media Viewer

<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
: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].

Sirv Media Viewer documentation

Lazy image

<sirv-image
    :id='...'
    :data-src='...'
    :data-bg-src="..."
    data-options="..."
></sirv-image>

:id - image id
:data-bg-src - using for background image src, overrides :data-src
:data-src - using for image src
data-options - viewer options

Lazy image documentation

loadSMVScript module

This module adds Sirv Media Viewer script to page once.

usage

import { loadSMVScript } from 'sirvjs-vue';

loadSMVScript().then((sirv) => {
	// script is loaded
});

API

`promise = loadSMVScript([attrs], [parentNode])`

Append a <script> node with 'https://scripts.sirv.com/sirvjs/v3/sirv.js' URL to the <head> element in the DOM.

`attrs` (optional)

More about it you can find here

`parentNode` (optional)

More about it you can find here

`promise`

Returns a promise which resolves to the sirv object, or rejects with err if any occurred.

Examples

IgorVaryvoda/sirvjs-vue