Using Sirv Media Viewer with Vue.js

Sirv Media Viewer is a modern tool for displaying 360 degree spins, 3D models, images and videos, either separately or in a gallery.

Here's a list of Sirv Media Viewer components you can use in a Vue.js app, either alone, in a gallery or in a smart gallery:

• Image Zoom
• 360 Spin and 3D models
• Responsive Images
• Video

Demo

View full demo on StackBlitz

Getting started

To get the most from Sirv (dynamic image resizing, image zoom tiling and much more):

1. Create a Sirv account (or login).
2. Upload media to your Sirv account.

Install Sirv Media Viewer npm package

npm install @sirv/sirvjs-vue
#pnpm add @sirv/sirvjs-vue
#yarn add @sirv/sirvjs-vue

Register Sirv Media Viewer as a plugin

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import SirvjsVue from '@sirv/sirvjs-vue';
const app = createApp(App);

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

Load Sirv JS

You can load the Sirv Media Viewer script in your HTML:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

If you need finer control, use the loadScript module:

import { loadScript } from '@sirv/sirvjs-vue';
loadScript().then((sirv) => {
    sirv.start();
})

Using the component

There are two ways you can use the Sirv Media Viewer component in your Vue app.

slides array

<sirv-media-viewer
:slides="[
  {
    src: 'https://demo.sirv.com/demo/Switch/switch-front.jpg',
    type: 'zoom',
  },
  {
    src: 'https://demo.sirv.com/Examples/Coach/Coach.spin',
    type: 'spin',
  },
  {
    src: 'https://demo.sirv.com/demo/Switch/nintendo_switch.glb',
    type: 'model',
  },
  {
    src: 'https://demo.sirv.com/demo/Switch/switch.mp4',
    type: 'video',
  },
]"
></sirv-media-viewer>

The slides object accepts other props, which you can find below.

div options

Alternatively, you can use the component by adding each element of the gallery as a div, for example:

<sirv-media-viewer data-options="fullscreen.enable:false;">
<div
    data-type="zoom"
    data-src="https://demo.sirv.com/demo/Switch/switch-front.jpg"
></div>
<div
    data-type="spin"
    data-src="https://demo.sirv.com/Examples/Coach/Coach.spin"
    data-options="column.reverse:true;"
></div>
<div
    data-type="model"
    data-src="https://demo.sirv.com/demo/Switch/nintendo_switch.glb"
></div>
<div
    data-type="video"
    data-src="https://demo.sirv.com/demo/Switch/switch.mp4"
></div>
</sirv-media-viewer>

You can apply data types and data options in the div itself. View all available options.

Props

slides

• :id - viewer id
• :data-src - used for `*.view` files, overrides `:slides`. .view files documentation
• data-options. Full list of options.
• :slides - an Array with slide sources. Sources can be a String or an Object.

A String accepts an url, eg https://demo.sirv.com/Examples/Coach/Coach.spin
An 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`, `model`, `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].

Responsive image component

Achieving perfectly sized responsive images delivered in the optimal format is a piece of cake with Sirv Media Viewer. Here's an example:

<sirv-image
    data-src='https://demo.sirv.com/tomatoes-basil.jpg'
    data-options="threshold:100;"
></sirv-image>

Full list of options.

Using the Sirv API and events

You have full control of the viewer experience with API methods and events:

• Sirv JS API methods
• Sirv JS events

Here is a sample component:

<template>
 <sirv-media-viewer
    :id="id"
    data-src="https://demo.sirv.com/Examples/b74317.view"
 ></sirv-media-viewer>
  <div class="flex justify-center my-5">
    <button class="btn mr-2" @click="prev">Previous</button>
    <button class="btn" @click="next">Next</button>
  </div>
</template>
  <script setup>
import { onMounted, ref } from 'vue';
import { loadScript } from '@sirv/sirvjs-vue';

const viewer = ref(null);
const id = ref('smv-test');
const prev = () => {
  if (viewer.value) {
    viewer.value.prev();
  }
};

const next = () => {
  if (viewer.value) {
    viewer.value.next();
  }
};

onMounted(() => {
  loadScript().then((sirv) => {
    sirv.start();
    sirv.on('viewer:ready', (e) => {
      if (e.id === 'smv-test') {
        viewer.value = e;
        console.log('viewer:ready', e);
      }
    });
  });
});
</script>

Nuxt

Install the npm package

npm install @sirv/sirvjs-vue
#pnpm add @sirv/sirvjs-vue
#yarn add @sirv/sirvjs-vue

Register as a Nuxt plugin

// plugins/smv.client.ts
import SirvjsVue from '@sirv/sirvjs-vue';
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(SirvjsVue, {})
})

Load Sirv JS

You can load the script (https://scripts.sirv.com/sirvjs/v3/sirv.js globally via the useHead composable, or in the nuxt config head section.

If you need more control, you can load it via loadScript:

import { loadScript } from '@sirv/sirvjs-vue';
loadScript().then((sirv) => {
    sirv.start();
})

If your prefer to use Nuxt Image to handle your static images, you can use our official Sirv provider for Nuxt Image.

Gridsome

The approach explained above should work fine with Gridsome. If you only need the Image CDN functionality of Sirv, you can use this third-party plugin: gridsome-plugin-image-cdn.

Got any questions?

We hope that helped show how easily you can embed responsive images, 360 spins, videos and image zooms in your Vue.js website or app.

If you have any questions about using Sirv and Vue.js, please contact the Sirv team.