Add Hotspot To Your Image With vue-hotspot Component

vue-hotspot is an image note component that adds interactive hotspots with tooltips to your images.

How to use it:

Import the component.

import VueHotspot from 'vue-hotspot'

Register the component.

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

Insert the component into your template.

    @after-delete="afterDelete" />

Use the component.

export default {
  components: {
    'v-hotspot': VueHotspot
  data () {
    return {
      hotspotConfig: {
        image: 'your-image-url.png',
        editable: true,
        interactivity: 'hover'
  methods: {
    saveData (data) {
      // Do something with the list of hotspots
    afterDelete () {
      // Do something after delete
      console.log('Do something after delete ...')

Default configs.

// Object to hold the hotspot data points
data: [],

// Default image placeholder
image: '',

// Specify editable in which the plugin is to be used
// `true`: Allows to create hotspot from UI
// `false`: Display hotspots from `data` object
editable: true,

// Event on which the hotspot data point will show up
// allowed values: `click`, `hover`, `none`
interactivity: 'hover',

// Hotspot schema
schema: [
  'property': 'Title',
  'default': 'Vue Hotspot'
  'property': 'Message',
  'default': 'This is a Vue Hotspot Component which lets you create hotspot. '


Add Hotspot To Your Image With vue-hotspot Component


v2.0.2 (10/02/2020)

  • Update

v2.0.1 (12/19/2019)

  • Update

Download Details:

Author: cn-wx

Live Demo:

Download Link:

Official Website:

Install & Download:


Add Comment