Need help with vue-heatmapjs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

174 Stars 15 Forks MIT License 99 Commits 9 Opened issues


Heatmap directive for tracking user activity

Services available


Need anything else?

Contributors list



npm version

A vue directive for collecting and displaying user activity on a component



You can use NPM or Yarn to add this plugin to your project ```bash npm install vue-heatmapjs


yarn add vue-heatmapjs ```


You need to install this plugin in you main.js

// main.js

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



And then you can add the

directive to the dom elements you want to track.


You can use the

directive to collect scroll position data from your application

Toggle heatmap

You can toggle the heatmaps on and off by passing an expression into the directive, the example below will produce something similar to the image at the top of these docs

Listen for events


You can pass in an Observable into the plugin options and subscribe to events captured for the heatmaps.

// main.js
import { Subject } from 'rxjs';

const stream = new Subject(); Vue.use(Vueheatmap, { stream, });



You can pass an afterAdd method through with the plugin options, this 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 }, })

Pause collection

You can pass an RXJS Subject through with the plugin options that will allow you to toggle whether your directives collect data or not

export const pauser = new Subject();

Vue.config.productionTip = false; Vue.use(Vueheatmap, { pauser, });

// Pause data collection;
// Resume data collection;

Preload heatmap

Once you have captured heatmap data and persisted the data somewhere you will probably need a way of loading this data back in to your heatmap.

You can pass in an array of heatmap events using the heatmap preload plugin option

Vue.use(Vueheatmap, {
  heatmapPreload: [{ x: 10, y: 10, value: 100 }],

The plugin can also handle a Promise ```js //main.js Vue.use(Vueheatmap, { heatmapPreload: fetch('').then(response => response.json()), });

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.