Hotspot component for Vue.js – vue-hotspot

Vue-Hotspot is an image hotspot component for Vue.js. where you can click any part of the image and add note about the selected area with title and description, good component for detailing image areas. It is an image note component that adds interactive hotspots with tooltips to your images.


npm (Recommended)

$ npm install vue-hotspot --save


$ yarn add vue-hotspot


ES Modules with npm (Recommended)

import Vue from 'vue'
import VueHotspot from 'vue-hotspot' 

Vue.component('v-hotspot', VueHotspot)

Global variable

Without any module system, the component is exposed as window.VueHotspot.

Vue.component('v-hotspot', VueHotspot)

Using the component


    @after-delete="afterDelete" />
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'
  methods: {
    saveData (data) {
    afterDelete () {
      console.log('Do something after delete ...')

See live demo and download source code.


This awesome script developed by cn-wx. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.