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


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


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

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


To use this plugin import it in your main.js

// main.js

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


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

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

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

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

    data() {
      return {
        show: false,

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) {
    // you can fire this back to your analytics server

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