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 $ npm install vue-heatmapjs --save 

Now enable the plugin in the main Vue setup file.

main.js

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. logUserInteractions(data); } }); new Vue({ el: '#app', render: h => h(App) }); 

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

App.vue

<template> <div id="app" v-heatmap> ... </div> </template> 

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.

App.vue

<template> <div id="app" v-heatmap="false"> ... </div> </template> 

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