Minimal Vue.js Sample
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 Features in this sample
GoJS on Different Platforms
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:
- React: We provide a React Component as an NPM package and a usage sample. See the learn page on GoJS with React for more information on React integration.
- Angular: We provide an Angular Component as an NPM package and a usage sample. See the learn page on GoJS with Angular for more information on Angular integration.
- Vue: We provide a Vue.js Sample.
More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS learn pages.