Using Sirv Media Viewer with Vue.js

Sirv Media Viewer is a modern tool for displaying 360 degree spins, 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
• Responsive Images
• Video

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.

Add Sirv embed markup

Start by writing the Sirv Media Viewer code - the following example will create a gallery containing a spin, an image and a video:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/example.spin"></div>
  <div data-src="https://demo.sirv.com/image.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/video.mp4"></div>
</div>

Initialize Sirv JS

Next, we must initialize Sirv JS. The following example uses the document.createElement() method to load Sirv JS:

export default {
  ....
  methods: {
    loadSirv(components) {
      return new Promise((resolve) => {
        const script = document.createElement('script');
        script.src = 'https://scripts.sirv.com/sirvjs/v3/sirv.js';
        script.type = 'text/javascript';
        script.async = true;
        if (components) {
          script.dataset.components = components;
        }
        script.onload = resolve;
        document.body.appendChild(script);
      });
    },
  },
};

Now call the function in Vue's mounted hook, to initialize Sirv:

export default {
  ....
  mounted() {
    if (typeof window.Sirv === 'undefined') {
      this.loadSirv('spin, zoom, video')
        .then(() => {
          window.Sirv.start();
        })
        .catch(() => console.error('Something went wrong.'));
    } else {
      window.Sirv.start();
    }
  },
}

You can selectively load Sirv Media Viewer components by passing them as a parameter in the loadSirv function. Above, we're loading the spin, zoom and video components.

Here's the end result:

Using the Sirv API and events

You have full control of the viewer experience by using window.Sirv. This and other API methods/events are documented here:

• Sirv JS API methods
• Sirv JS events

Loading Sirv JS on event

It's possible to only load Sirv JS once a specific event occurs - in the following example, a button click.

1. Set the autostart option to off in your Sirv embed:

<div class="Sirv off" data-options="autostart:off">
  <div data-src="https://demo.sirv.com/tshirt-aqua.spin"></div>
</div>

2. Add a new method, let's name it startSirv:

export default {
  ....
  methods: {
    startSirv() {
      if (typeof window.Sirv === 'undefined') {
        // We're loading only the spin component in this example
        this.loadSirv('spin').then(() => {
          window.Sirv.start('.off');
        });
      } else {
        window.Sirv.start('.off');
      }
    }
  }
}

3. Call it using the v-on directive:

  <button v-on:click="startSirv">Start Sirv</button>

And voila:

Custom navigation

The following example shows you how to use Sirv Media Viewer's API to control the gallery using custom buttons:

export default {
....
  methods: {
    previous() {
      if (window.Sirv.viewer.getInstance('.custom').isReady()) {
        window.Sirv.viewer.getInstance('.custom').prev();
      }
    },
    next() {
      if (window.Sirv.viewer.getInstance('.custom').isReady()) {
        window.Sirv.viewer.getInstance('.custom').next();
      }
    }
  }

The script checks if the Sirv instance is ready, then uses the API to control the button behavior.

Next, let's add some Sirv markup:

<!-- Sirv embed code -->
<div class="Sirv custom" data-options="arrows:false;thumbnails.enable:false;">
  <div data-src="https://demo.sirv.com/demo/apt/01.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/apt/02.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/apt/03.jpg" data-type="zoom"></div>
</div>

Now, let's use Vue's v-on directive to bind buttons to call these functions:

<!-- custom buttons -->
<div class="buttons">
  <button v-on:click="previous">⬅ Previous</button>
  <button v-on:click="next">Next ➡</button>
</div>

Here's the end result:

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.