This is a Vue.js sample. For a Vue 3 sample, clone the GitHub repository: Vue 3 sample using GoJS called gojs-vue-basic.
The GoJS Diagram is held in a "diagram" component, and only exposes a small fraction of the functionality of Diagram. That includes the "modelData" property, to initialize the Diagram to show a model, and the "diagram" property, to get access to the Diagram.
That component also raises two events: "model-changed" corresponding to Model.addChangedListener, and "changed-selection" for the "ChangedSelection" DiagramEvent.
That component also supports two different ways of modifying the diagram: access to the Model via the "model" method so that code can call Model methods such as Model.setDataProperty, and an "updateDiagramFromData" method. The latter permits data changes without calling Model methods to notify Diagrams showing the model, but at the cost of not being able to support undo and redo.
GoJS is intended to run in any environment that executes JavaScript. This includes on browsers and within browser frameworks, and also in headless contexts such as Node.js.
We maintain examples for common frameworks:
More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS Intro.