vue-cytoscape is a Vue.js component library that provides declarative integration with the powerful Cytoscape.js graph visualization library. It allows developers to build interactive graph UIs using Vue components like <VueCytoscape>, <CyNode>, and <CyEdge>. The current stable version is 1.0.8, with recent updates (v1.0.7) focusing on reactivity for element data and positions. While no explicit release cadence is documented, the changelog indicates active development and feature improvements across minor versions. Key differentiators include first-class TypeScript support, the ability to manage multiple independent Cytoscape instances within a Vue application, and a Vue-idiomatic v-on directive events API for handling graph interactions. The library transitioned significantly in v1.x from direct instance access and configuration-based element creation to a more robust, component-based approach, leveraging Vue's reactivity system effectively.
npm install vue-cytoscapeVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to set up a basic Vue 3 application using vue-cytoscape, rendering a graph with two nodes and one edge. It showcases the component-based approach using <CyNode> and <CyEdge> for elements, custom styling, and how to access the Cytoscape core instance via the afterCreated lifecycle hook to register event listeners.
Use the 'afterCreated' lifecycle hook on the `<VueCytoscape>` component to obtain and store the Cytoscape core instance. This instance should then be passed explicitly to any child components or methods that require it.
Migrate to the component-based API by using `<CyNode>` and `<CyEdge>` as children of `<VueCytoscape>` for declarative element management. This approach leverages Vue's reactivity system more effectively.
Ensure all graph element mutations (additions, removals, updates) are managed through the `<CyNode>` and `<CyEdge>` components to leverage Vue's reactivity system. Direct manipulation of the Cytoscape instance will no longer automatically update the Vue component state or UI.
Pass the Cytoscape core instance received in the `afterCreated` hook to child components or methods that need it. The instance is no longer globally accessible via `$cytoscape.instance`.
Ensure `import { CyNode, CyEdge } from 'vue-cytoscape'` is present in your script block and the components are correctly used within the template with proper casing.Always manage graph elements (nodes and edges) through the `<CyNode>` and `<CyEdge>` components within the `<VueCytoscape>` component to ensure changes are reactive and reflected in the Vue component tree.