Capture and visualize mouse activity in a heatmap with a Vue directive

vue-heatmapjs

For statistic purposes (or anything else) you can use a directive for Vue.js, vue-heatmapjs, designed to collect and display user activity on a component.

Live Demo

Example

You can use NPM or Yarn to add this plugin to your project

npm install vue-heatmapjs
# or
yarn add vue-heatmapjs

Usage

To use this plugin import it in your main.js

// main.js

import Vue from 'vue'
import heatmap from 'vue-heatmapjs'

Vue.use(heatmap)

And then you can add the v-heatmap directive to the dom elements you want to track.

<!-- App.vue -->
<div v-heatmap>
  ...
</div>

You can toggle the heatmap on and off by passing an expression into the directive:

<template>
  ...
  <div v-heatmap="show"></div>
  <button @click="show = !show">Toggle Heatmap</button>
  ...
</template>

<script>
  ...
    data() {
      return {
        show: false,
      }
    },
  ...
</script>

Using the directive to a single nested component:

You can listen for events by passing an afterAdd method within the plugin options, which will allow you to access and process the events captured for the heatmap:

// main.js

Vue.use(heatmap, {
  afterAdd(data) {
    console.log(data)
    // you can fire this back to your analytics server
  },
})

A cool project available on GitHub, help the author by expanding it!