CODEWITHSUNDEEP
vue.jswebpackgojs
Lorenzo
Lorenzo

Reputation: 41

gojs with vuejs and webpack

I'm trying to set up a simple gojs diagram into vuejs + webpack. I installed gojs with npm and imported it on my project in the main.js file: import go from 'gojs' Now my problem is how to make things work in the component implementation, that's the code of the component Diagram.vue: 

<template>
   <div id="myDiagramDiv" style="width:300px; height:300px;"></div>
</template>

<script>
   export default {
      name: 'Diagram', 
      data: function () {
         return {
            nodeDataArray: [
               {key:1, text:"Alpha"},
               {key:2, text:"Beta"}
            ],
            linkDataArray: [
               {from:1, to:2}
            ]
         }
      },
      methods: {
         getUnits: function(){
            var $ = go.GraphObject.make;
            myDiagram = $(go.Diagram, "myDiagramDiv");
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
         }
      },
      mounted: function(){
         this.getUnits();
      }
}
</script>

it compiles without error but I can only see a white empty box...

Upvotes: 1

Views: 2648

Answers (2)

Simon Sarris
Simon Sarris

Reputation: 63872

ow my problem is how to make things work in the component implementation

There is an official (made by the GoJS team) VueJS + Webpack + GoJS project in the gojs-projects github, that you can use as an example: https://github.com/NorthwoodsSoftware/GoJS-projects

Upvotes: 0

Walter Northwoods
Walter Northwoods

Reputation: 4146

You haven't initialized the Diagram yet. That is typically done by calling go.GraphObject.make(go.Diagram, theHTMLDivElement, { . . . options . . .})

There is a complete but simple example of using GoJS in a Vue.js framework at https://gojs.net/latest/samples/vue.html.

Upvotes: 1

Related Questions