试图让 Vue-heatmapjs 在 nuxt 应用程序上工作答案

【问题标题】：Trying to get Vue-heatmapjs working on a nuxt application试图让 Vue-heatmapjs 在 nuxt 应用程序上工作
【发布时间】：2021-12-27 16:08:58
【问题描述】：

您好，第一次在堆栈溢出上发帖，很抱歉我正在尝试让 vue-heatmapjs https://github.com/BrockReece/vue-heatmapjs 在我的 nuxt js 项目中工作。因为我没有 main.js，所以我把它放在了一个插件中，我没有收到任何错误。这个项目的滚动图似乎可以工作，但它只是点击图。

plugins: [
    { ssr: false, src: "~plugins/heatmap-plugin.js"}
  ],

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

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

vue.config.productionTip = false;
vue.use(Vueheatmap, {
  stream,
  pauser,
  heatmapPreload: [{ x: 50, y: 50, value: 100 }],
  afterAdd(data) {
    console.log(data)
    // you can fire this back to your analytics server
  },
});

stream.subscribe(console.log);

以上是我的插件代码

【问题讨论】：

这个项目的滚动地图似乎可以工作，但它只是点击地图。所以它工作了吗？什么不是？
是的，滚动图更新良好并根据用户所在位置更改颜色但是我无法让热图响应任何鼠标或单击移动，因此它永远不会改变颜色，除了测试预加载我有。
它分为v-scrollmap（用于滚动热图）和v-heatmap（用于单击和鼠标移动热图），也许您只添加了v-scrollmap。你能展示一下你是如何使用它的吗？
演示代码在这里github.com/BrockReece/vue-heatmapjs/blob/master/src/App.vue
我只使用<template lang="pug"> .list-and-filters-area(v-heatmap="true") 的v-heatmap atm

标签： vue.js vuejs2 nuxt.js

【解决方案1】：

所以在搜索了很多之后，因为这个热图应用程序的依赖项与我们当前的 nuxt 和 vue 设置不兼容，所以我重新设置了它并更改了依赖项并重写了很多代码。

Vue-rx 是我必须安装以及更新 rxjs 的关键之一

【讨论】：