Vue.js 360 degree spin and 3D model viewer

The Vue component for Sirv Media Viewer is perfect for showcasing interactive 360-degree product views, as well as 3D models within your Vue applications. Designed with performance and usability in mind, this feature-rich viewer offers a seamless and immersive experience for your customers, allowing them to explore products from every angle, with exceptional detail and clarity.

Follow the steps below to add our cutting-edge 360-degree product viewer into your Vue project.

Demo

View on StackBlitz.

Getting started

1. Sign up and upload your 360 spin images and/or 3D models

Sign up for a Sirv account, you'll automatically start a free trial (no credit card required). Then upload your sets of images for creating 360 product views. Learn more about how spin files are created.
For 3D models, you can upload GLB or USDZ files, and they're ready to be embedded.

2. Install Sirv NPM packages

Let's install Sirv's npm package.

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

3. 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');

Now you can use the Sirv Media Viewer component to add 360 spins and 3D models to your Vue app.

Usage

Loading 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.

Add your 360 spins and/or 3D models to the slides array:

<sirv-media-viewer :slides="[
 {
  src: 'https://demo.sirv.com/Examples/Coach/Coach.spin',
  type: 'spin',
  dataOptions: {
   columnReverse: 'true',
  },
 },
 {
  src: 'https://demo.sirv.com/spins/karlmartini/asics-144/asics-144.spin',
  type: 'spin',
  dataOptions: {
   initialize: 'click',
  },
 },
 {
  src: 'https://demo.sirv.com/ring/test/test.spin',
  type: 'spin',
 },
 {
  src: 'https://demo.sirv.com/model.glb',
  type: 'model',
 },
]"
></sirv-media-viewer>

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

Use 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="spin"
  data-src="https://demo.sirv.com/Examples/Coach/Coach.spin"
 ></div>
 <div
  data-type="spin"
  data-src="https://demo.sirv.com/spins/karlmartini/asics-144/asics-144.spin"
  data-options="column.reverse:true;"
 ></div>
 <div
  data-type="spin"
  data-src="https://demo.sirv.com/ring/test/test.spin"
  data-options="initialize:click;hint.message.text:Click to start the spin"
 ></div>
 <div
  data-type="model"
  data-src="https://demo.sirv.com/model.glb"
 ></div>
</sirv-media-viewer>

You can apply data types and data options in the div itself. You can find all the options in the 360 spin and 3D model documentation.

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

Events and API

Here is a sample component:

<template>
<div>
 <sirv-media-viewer
  :id="id"
  :slides="[
   {
    src: 'https://demo.sirv.com/Examples/Coach/Coach.spin',
    type: 'spin',
    dataOptions: {
     hint: {
      message: {
       enable: true,
       text: 'hello there',
      },
     },
    },
   },
   {
    src: 'https://demo.sirv.com/spins/karlmartini/asics-144/asics-144.spin',
    type: 'spin',
    dataOptions: {
     initialize: 'click',
    },
   },
   {
    src: 'https://demo.sirv.com/ring/test/test.spin',
    type: 'spin',
   },
   {
    src: 'https://demo.sirv.com/model.glb',
    type: 'model',
   },
  ]"
  >
 </sirv-media-viewer>
 <div class="flex justify-center mt-5">
  <button class="btn mr-2" @click="prev">Previous</button>
  <button class="btn" @click="next">Next</button>
 </div>
</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>

Full list of API methods and Events.

Get help

If you need help with the Vue component for Sirv Media Viewer, please message the Sirv support team.