Create Heatmaps in Vue with vue-heatmapjs

Joshua Bemenderfer

Heatmaps. A great marketing tool that works by tracking literally every move and click the mouse makes on a webpage, normalizes them, and sends them to a server for whomever might be on the other end to analyze (complete with pretty colors.) A perfectly good and acceptable use of your data and, well, mobile data. Well, if you find yourself needing to implement one of these in your Vue app, vue-heatmapjs is there to help.


Install vue-heatmapjs in your Vue.js project.

# Yarn
$ yarn add vue-heatmapjs

$ npm install vue-heatmapjs --save


Now enable the plugin in the main Vue setup file.


import Vue from 'vue';
import App from './App.vue';
import heatmap from 'vue-heatmapjs';

Vue.use(heatmap, {
  // Fired on every click and mousemove.
  // data is an object with xy positions and heat value.
  // It would be a good idea to combine and throttle these before sending.
  afterAdd(data) {
    // Send the data here.

new Vue({
  el: '#app',
  render: h => h(App)

Now, add the v-heatmap directive to the component you want to track.


  <div id="app" v-heatmap>

An example of an app with heatmaps. Oooh. Color blobs!

This will render a visual heatmap for all your interactions with the page as seen above. In most cases you won’t want this though. Thankfully you can disable it with v-heatmap="false" and still receive all the events.


  <div id="app" v-heatmap="false">

Now you no longer have a good excuse when marketing tells you they want heatmaps. Sorry. Have fun finding a better one.

  Tweet It

πŸ•΅ Search Results

πŸ”Ž Searching...