Vue-cli [Webpack]: How to install Vis?

Posted 2 years ago by Filip_Zdravkovic

UPDATED:

I've tried the following in App.vue and it works:

    <template>
  <div id="mynetwork"></div>
</template>

<script>
  import vis from 'vis'

  var nodes = {};
  var edges = {};
  var container = {};
  var data = {};
  var options = {};
  var network = {};

  export default {
    name: 'app',
    mounted: function () {
      // create an array with nodes
      nodes = new vis.DataSet([
        { id: 1, label: 'Node 1' },
        { id: 2, label: 'Node 2' },
        { id: 3, label: 'Node 3' },
        { id: 4, label: 'Node 4' }
      ]);

      // create an array with edges
      edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 }
      ]);

      // create a network
      container = document.getElementById('mynetwork');

      // provide the data in the vis format:
      data = {
        nodes: nodes,
        edges: edges
      };

      options = {};

      // initialize your network!
      network = new vis.Network(container, data, options);
    }
  }
</script>

The reasons why I have these variables outside of Vue:

  var nodes = {};
  var edges = {};
  var container = {};
  var data = {};
  var options = {};
  var network = {};

... is this: https://forum.vuejs.org/t/vis-js-does-not-work-properly-with-vue-when-adding-a-new-edge-all-nodes-become-red-and-edges-overlap/5132 and this: https://github.com/almende/vis/issues/2524#issuecomment-273644057

Also, since I'll need these variables (network, data etc.) in other components, I'm not sure if this is the best place (App.vue), I guess that there's a better way to organize these stuff...

Please sign in or create an account to participate in this conversation.