vue 360 degree Image viewer in vue js

By Ved Prakash N | Mar 27, 2023 | Vue JS
Share :

Vue 360 degree Image viewer in vue js

In this post, you will be learning how to make a 360 degree product / image viewer in vue js.

We will be using a package for A Simple 360° Product Viewer with Vue.js named

So guys, let get started with Vue 360 degree image viewer.

Step 1: Install Vue JS 2  (ignore if you have already installed it)

$ npm install vue@^2

once, VUE 2 is installed then run the below command to create the application ( Vue CLI ) : 

$ vue create vue360project

when we run above command, then select Vue 2 from the given option and hit enter to complete the Installation.

once, installation is successful, then change the application path as follows:  cd vue360project

Step 2: Installation Vue 360 Package

$ npm install vue-360

once the package is installed successfully, let begin with the Configuration.

Step 3: Configuration : go to main.js file as follows src/main.js

import VueThreeSixty from 'vue-360'
import 'vue-360/dist/css/style.css'

Step 4: Lets add "360 view" in App.vue file as given below


That's it, you are all set for 360 image view in vue js.

Note: If you want to manage or do more changes in this vue 360 image viewer. please follow this



Share this blog on social platforms