Add Hotspot Component To Your Image for Vue.js

Vue-Hotspot is an image hotspot plugin for Vue.js that adds interactive hotspots with tooltips to your images.

image hotspot example, image hotspot generator, responsive image hotspots, vue image hotspot, image with multiple hotspot that activates on hover

A Simple And Beautiful 360° Product Viewer Built on Vue.js

How to make use of it:

Installation:

npm (Recommended)
$ npm install vue-hotspot --save
yarn
$ yarn add vue-hotspot

1. ES Modules with npm (Recommended):

import Vue from 'vue'
import VueHotspot from 'vue-hotspot' // refers to components/VueHotspot.vue in webpack

2. Using the component.

<template>
  <v-hotspot
    :init-options="hotspotConfig"
    @save-data="saveData"
    @after-delete="afterDelete" />
</template>

<script>
import Vue from 'vue'
import VueHotspot from 'vue-hotspot'
export default {
  components: {
    'v-hotspot': VueHotspot
  },
  data () {
    return {
      hotspotConfig: {
        image: 'your-image-url.png',
        editable: true,
        interactivity: 'hover',
        data: [
          { Message: 'A prepopulated hotspot', Title: 'Vue Hotspot 1', x: 33.3, y: 58.33 },
          { Message: 'Another prepopulated hotspot', Title: 'Vue Hotspot 2', x: 53.3, y: 78.3 }
        ],
        hotspotColor: '#85ce61',
        messageBoxColor: '#409eff',
        textColor: '#333',
        opacity: 0.9
      }
    }
  },
  methods: {
    saveData (data) {
      // Do something with the list of hotspots
      console.log(data)
    },
    afterDelete () {
      // Do something after delete
      console.log('Do something after delete ...')
    }
  }
}
</script>

Add Hotspot To Your Image, vue-hotspot Plugin/Github