How to use SigmaJS in VueJS?

Viewed 424

I'm new to VueJs and want to integrate SigmaJS graphs in VueJS. I configured vue.config file to support sigma imports.

This is what Ive tried so far:

App.vue

<template><div id="graph-container"></div></template>
<script>
import sigma from "sigma";
import("sigma/build/plugins/sigma.layout.forceAtlas2.min");
export default {
  name: "App",
  data() {
    return {
      graph: {
        nodes: [...],
        edges: [...],
      },
    };
  },
  mounted: function () {
    let s = new sigma({
        graph: {
          nodes: this.graph.nodes,
          edges: this.graph.edges,
        },
        renderer: {
          container: document.getElementById("graph-container"),
          type: "canvas",
        },
      });
      s.refresh();
      s.startForceAtlas2();
  },
};
</script>

vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {modules: ['node_modules']},
    module: {
      rules: [{
          test: require.resolve('sigma'),
          use: 'imports-loader?wrapper=window',
        },
      ]
    }
  }
}

Error

TypeError: _root.postMessage is not a function

0 Answers
Related