如何在Nuxt应用中配置vue-heatmapjs解决点击热图不生效问题

• 插件写法不符合Nuxt规范：自行导入的Vue实例和Nuxt运行时注入的全局实例不一致，导致点击事件绑定未正确挂载
• 未显式声明点击捕获配置：部分版本的vue-heatmapjs需要显式开启点击事件捕获，否则仅默认监听滚动行为
• 若页面元素存在@click.stop、@click.prevent等阻止事件冒泡的修饰符，会导致全局点击监听无法捕获对应事件

1. 修改heatmap-plugin.js代码，改用Nuxt官方推荐的插件注入形式，同时显式开启点击捕获配置：

import { Subject } from 'rxjs';
import Vueheatmap from 'vue-heatmapjs'

const stream = new Subject();
export const pauser = new Subject();

export default ({ Vue }) => {
  Vue.config.productionTip = false;
  Vue.use(Vueheatmap, {
    stream,
    pauser,
    // 显式开启鼠标点击捕获
    captureClick: true,
    // 可选：开启移动端触摸点击捕获
    captureTouch: true,
    heatmapPreload: [{ x: 50, y: 50, value: 100 }],
    afterAdd(data) {
      console.log(data)
      // 可在此处将数据上传到分析服务
    },
  });
  stream.subscribe(console.log);
}

2. 检查绑定了v-heatmap指令的页面元素，若内部元素有阻止事件冒泡的配置，可选择移除冒泡阻止，或者手动向stream推送点击数据，示例如下：

// 手动推送点击数据的方法示例
methods: {
  handleInnerClick(e) {
    stream.next({
      x: e.clientX,
      y: e.clientY,
      value: 1
    })
  }
}

3. nuxt.config.js中的插件注册配置无需修改，原配置已正确关闭服务端渲染，符合客户端插件的运行要求。

内容的提问来源于stack exchange，提问作者Laurie Humphries-Cable