vue 360 degree Image viewer in vue js

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

https://www.fundaofwebit.com/post/vue-360-degree-image-viewer-in-vue-js

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 https://github.com/rajeevgade/vue-360

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'
Vue.use(VueThreeSixty)


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

<vue-three-sixty
  :amount=36
  imagePath="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360"
  fileName="orange-{index}.jpg"
  spinReverse
  scrollImage
/>


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

DOC: https://rajeevgade.github.io/vue-360

Github: https://github.com/rajeevgade/vue-360