# @fsenn/vue-pannellum

> Vue wrap of the brilliant panorama viewer Pannellum

Latest version **0.6.5** (published 2020-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fsenn/vue-pannellum
pnpm add @fsenn/vue-pannellum
yarn add @fsenn/vue-pannellum
bun add @fsenn/vue-pannellum
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.5 |
| Published | 2020-09-11 |
| First published | 2020-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Florian Senn |
| Maintainers | fsenn |
| Keywords | vue, pannellum, panorama, equirectangular, cubemap, viewer |

## Links

- npm: https://www.npmjs.com/package/@fsenn/vue-pannellum
- Repository: git@github.com:florian-senn/vue-pannellum
- npm.io page: https://npm.io/package/@fsenn/vue-pannellum

## Dependencies (2)

- [pannellum](https://npm.io/package/pannellum.md) ^2.5.2
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 0.6.5 (latest) — 2020-09-11
- 0.6.4 — 2020-09-11
- 0.6.3 — 2020-09-11
- 0.6.2 — 2020-09-11
- 0.6.1 — 2020-09-11
- 0.5.1 — 2020-09-11
- 0.6.0 — 2020-02-28

## README

# vue-pannellum

Vue wrap of the brilliant panorama viewer Pannellum

## Usage
Install
```
npm install vue-pannellum
```

Register
```js
import Vue from 'vue'
import VuePannellum from 'vue-pannellum'

Vue.component('VPannellumn', VuePannellum)
```

Use
```html
<v-pannellum :src="equirectangularUrl" style="height: 500px;"></v-pannellum>
```

## API

Component props:

- **src (required)**: The equirectangular image url or cubemap urls in this format: {px: pxUrl, nx: nxUrl, ... }.
- **preview**: The preview image url before loaded.
- **autoLoad (boolean, default: true)**: Whether automatically load.
- **autoRotate (number|boolean, default: 0)**: The auto-rotate speed, 0 or false means disabled, true is -2.
- **orientation (boolean, default: false)**: Turn the orientation sensor on (if supported).
- **showZoom (boolean, default: false)**: Show the zoom-in and zoom-out button.
- **showFullscreen (boolean, default: false)**: Show the fullscreen button.
- **compass (boolean, default: false)**: Show the compass indicator.
- **hotSpots (array, default: [])**: Show information on the panorama.
- **hfov (number, default: 75)**: The initial horizontal field of view in degrees.
- **yaw (number, default: 0)**: The initial yaw position in degrees.
- **pitch (number, default: 0)**: The initial pitch position in degrees.
- **minHfov (number, default: 30)**: The minimum limit of hfov in degrees.
- **maxHfov (number, default: 120)**: The maximum limit of hfov in degrees.

## Events

- `load`: When finish loading.
- `error`: When an error occurs, error message as parameter.

## Features
- type
- autoLoad
- autoRotate
- compass
- show/hide control button
- preview
- initial view: hfov/yaw/pitch
- slot
- watch url changing
- max/minHfov
- orientation

## Licence

MIT

---
_Source: https://npm.io/package/@fsenn/vue-pannellum · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._