Heatmap directive for tracking user activity
JavaScript Vue HTML
Switch branches/tags
Latest commit ef91976 Dec 11, 2017 @BrockReece BrockReece 1.2.0
Failed to load latest commit information.
build Initial commit Oct 17, 2017
config Build example Oct 17, 2017
docs Update example page Nov 30, 2017
src Update heatmap example Dec 10, 2017
static Initial commit Oct 17, 2017
.babelrc Initial commit Oct 17, 2017
.editorconfig Initial commit Oct 17, 2017
.eslintignore Initial commit Oct 17, 2017
.eslintrc.js Initial commit Oct 17, 2017
.gitignore Initial commit Oct 17, 2017
.postcssrc.js Initial commit Oct 17, 2017
LICENSE Create LICENSE Oct 18, 2017
README.md Add preload documentation Dec 11, 2017
index.html Use hotjar to track the usage of the demo site Oct 21, 2017
package.json 1.2.0 Dec 11, 2017
yarn.lock Add rxjs Dec 7, 2017




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

npm install vue-heatmapjs
# or
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 v-heatmap directive to the dom elements you want to track.

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

Toggle heatmap

You can toggle the heatmap 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

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

    data() {
      return {
        show: false,

Listen for events


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

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

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



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

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 }],