vue-panorama's Introduction

VueJS Panorama Viewer

Embed panorama into your website VueJS version of JQuery Panorama Viewer

Demo

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>

<!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

Contributing

If you would like to contribute code you can do so through GitHub by forking the repository and sending a pull request.

LICENSE

MIT

vue-panorama's People

Contributors

Stargazers

Watchers

vue-panorama's Issues

unknown custom element: <Panorama>

Currently on Vue 2.6.10, and for some reason keep getting this error:

vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <Panorama> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Media> at src/components/micro/Media.vue
       <Inspector> at src/components/Inspector.vue
         <Blog> at src/components/Blog.vue
           <App> at src/App.vue
             <Root>

Here's the component where I've included panorama:

<template>
  <div id="">
    <Panorama
      source="https://s3.amazonaws.com/road-trip-blog/4317faa5-87ee-3fb5-a6b7-1bf390c5d1e3-w2100.jpeg"
      caption="Awesome Panorama"
    />

  </div>
</template>
<script>
import { Panorama } from 'vuejs-panorama'

export default {
  components: { Panorama },
  name: 'Media',
  props: ['media', 'imageWidth']
}
</script>

Recommend Projects