Vue Image Hotspot

This package provides functionality for putting hotspot points on an image

Table of Contents

• Installation
  • Vue 3
  • Vue 2
  • Nuxt
• Usage
  • Adding Points
  • Showing Points
  • Full Implementation

Installation

Vue 3

Currently not supported, development will start soon

Vue 2

1. Installation Command

npm i vue-img-hotspot

2. Using it in main.js file, It's globally available in all components hereafter:

import ImageHotspot from 'vue-img-hotspot';
...
Vue.use( ImageHotspot );

Nuxt

1. Installation Command

npm i vue-img-hotspot

2. Add a custom plugin in nuxt.config.js:

  plugins: [
    // your other plugins
    '~/plugins/vue-image-hotspot',
  ],

3. Make vue-image-hotspot.js inside plugins directory in the root of your project and put the following content inside of it:

import Vue from 'vue'
import ImageHotspot from 'vue-img-hotspot'

Vue.use(ImageHotspot)

Usage

Adding Points

Template:

<template>
  <ImageHotspot @pointsUpdated="pointsUpdated" @imageUploaded="imageUploaded"></ImageHotspot>
</template>

Script:

<script>
  data() {
    return {
      points: [],
      image: null,
    }
  },

  methods: {
    pointsUpdated(points) {
      this.points = points
    },

    imageUploaded(image) {
      this.image = image
    },
  }
</script>

Showing Points

The read-only parameter prevents the package from opening a dialog on every click.
Template:

<template>
  <ImageHotspot read-only :prop-points="points" :prop-image="image"></ImageHotspot>
</template>

Script:

<script>
  data() {
    return {
      points: [
        {
          x: 370,
          y: 90,
          title: 'Lorem',
          description: 'Lorem ipsum',
          button_text: 'Google',
          button_link: 'https://google.com',
        },
        {
          x: 680,
          y: 160,
          title: 'Lorem',
          description: 'Lorem ipsum',
          button_text: null',
          button_link: null',
        },
      ],
      image: 'https://openmaptiles.org/img/home-banner-map.png'
    }
  }
</script>

Full Implementation

Additionally, you can combine both of the above-mentioned props and events and use them in case of providing update functionality

Template:

<template>
  <ImageHotspot 
    @pointsUpdated="pointsUpdated" @imageUploaded="imageUploaded"
    :prop-points="points" :prop-image="image">
  </ImageHotspot>
</template>