Embed panorama into your website with VueJS

by Vue.js Examples

VueJS Panorama Viewer

Embed panorama into your website (lightweight~4.56 kB) VueJS version of JQuery Panorama Viewer.

View demo Download Source

Getting started

using npm

npm install vuejs-panorama --save

Or using script tag for global use

<script src="https://unpkg.com/vuejs-panorama@latest/dist/Panorama.js"></script>

Or Download Panorama.js and include it in your html

Installing & Running Locally

Clone the repository using git:

git clone https://github.com/mudin/vue-panorama.git

Installing all dependencies:

npm install

Build

npm run build

Run locally:

npm run example

This will start development server on localhost:4000

Usage

Panorama by equirectangular image

<template>
    <Panorama source="pano.jpg" caption="Awesome Panorama"/>
</template>
<script>
    import { Panorama } from 'vuejs-panorama'

    export default {
        components: { Panorama }
    }
</script>

Or

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <Panorama source="pano.jpg" caption="Awesome Panorama"/>
    </div>
    <script src="vue.js"></script>
    <script src="vuejs-panorama.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

TODO List

  • Auto Rotate

GitHub