Quick Start (Vue 2 & 3)

Most basic rendering code

Vue2

Demo.vue

<template>
  <View360 class="is-16by9" :projection="projection" />
</template>
<script>
import { View360, EquirectProjection } from "@egjs/vue-view360";

export default {
  created() {
    this.projection = new EquirectProjection({
      src: "/egjs-view360/pano/equirect/veste.jpg"
    });
  },
  components: {
    View360
  }
}
</script>

Vue3

Demo.vue

<template>
  <View360 class="is-16by9" :projection="projection" />
</template>
<script>
import { defineComponent } from "vue";
import { View360, EquirectProjection } from "@egjs/vue3-view360";

export default defineComponent({
  setup() {
    const projection = new EquirectProjection({
      src: "/egjs-view360/pano/equirect/veste.jpg"
    });

    return {
      projection
    }
  },
  components: {
    View360
  }
})
</script>

Styles

You can directly import CSS file from @egjs/vue-view360.

main.ts

import "@egjs/vue-view360/css/view360.min.css";

Registering component

Global (Vue2)

import Vue from "vue";
import View360 from "@egjs/vue-view360";
import "@egjs/vue-view360/css/view360.min.css";

// This will register the component named "View360"
Vue.use(View360);

Global (Vue3)

import Vue from "vue";
import View360 from "@egjs/vue3-view360";
import "@egjs/vue-view360/css/view360.min.css";

const app = createApp(App);

// This will register the component named "View360"
app.use(View360);

Local

// You have to import like this, you shouldn't use the "default"
import { View360 } from "@egjs/vue3-view360";

export default {
  components: {
    View360
  }
}

Properties & Methods

See Properties & Methods

Events

All the events from Events are renamed to kebab-case.
For example, viewChange is changed to view-change.

<template>
  <View360 @view-change="onViewChange" />
</template>
<script lang="ts">
import { ViewChangeEvent } from "@egjs/vue-view360";

export default {
  methods: {
    onViewChange(evt: ViewChangeEvent) {
      // ...
    }
  }
}
</script>

Additional props

tag: string = "div"

tag can change HTML tag of .view360-container element.

For example, this:

<View360 tag="li" />

will generate this:

<li class="view360-container">
  <canvas class="view360-canvas" />
</li>

canvasClass: string = ""

Using prop class will add classes to the .view360-container element.
Instead, you can use canvasClass to add classes to .view360-canvas element.

For example, this:

<View360 class="CLASS_A" canvasClass="CLASS_B" />

will generate this:

<div class="view360-container CLASS_A">
  <canvas class="view360-canvas CLASS_B" />
</div>