Getting Started with Vue Flow: Installation, Nodes, Edges, Handles and Customization

Vue Flow is a lightweight Vue 3 component library that enables developers to create dynamic flowcharts with a clear and intuitive API.

Installation : Install the core package with npm add @vue-flow/core and import the required CSS files ( @vue-flow/core/dist/style.css and @vue-flow/core/dist/theme-default.css ).

Flowchart composition : A flowchart consists of Nodes , Edges and Handles . Nodes represent data points, edges connect nodes, and handles are the connection points on nodes.

Theme customization : Override default styles by importing the CSS files or by using custom CSS classes, component style / class attributes, or by redefining CSS variables (e.g., --vf-node-bg , --vf-node-text , --vf-connection-path , --vf-handle ).

Nodes :

Display nodes by passing an array to the :nodes prop of <VueFlow> .

Add or remove nodes via the addNodes and removeNodes actions or by directly mutating the nodes array.

Update node data with instance.updateNode(nodeId, { selectable: false, draggable: false }) or by modifying the node object returned from instance.findNode(nodeId) .

Node types are defined by the type field; built‑in types include default , input , output , and custom types can be registered via the nodeTypes prop or slot templates.

Edges :

Render edges by supplying an array to the :edges prop.

Add or remove edges with addEdges / removeEdges or by mutating the edges array.

Update edge data using instance.updateEdgeData(edgeId, { hello: "mona" }) or by editing the edge object directly.

Supported edge types include default , step , straight , and custom types via the edgeTypes prop.

Handles :

Insert a handle with <Handle type="source" :position="Position.Right" /> or <Handle type="target" :position="Position.Left" /> .

Adjust position using the position prop (e.g., Position.Right , Position.Left ).

When multiple handles share a side, give each a unique id and optionally style them to avoid overlap.

Hide a handle by setting style="opacity: 0" ; do not use v-if or v-show .

Control connectability with the connectable prop and enforce strict connections via :connection-mode="ConnectionMode.Strict" .

For dynamic handle updates, call updateNodeInternals([nodeId]) after changing layout.

Composables and Controlled Flow : Vue Flow provides composable APIs such as useVueFlow , useShuffle , useLayout , and useRunProcess to retrieve diagram data, randomize connections, apply Dagre layout, and simulate process execution.

Demo Overview : The article includes a full demo (App.vue) that showcases layout controls, node/edge rendering, a control panel with start/stop/shuffle buttons, and custom components ( ProcessNode.vue , AnimationEdge.vue ).

Key Utility Files :

useShuffle.js shuffles node order and generates possible edges.

useLayout.js uses Dagre to compute node positions for horizontal or vertical layouts.

useRunProcess.js simulates a process flow, handling running state, errors, cancellation, and skipping of descendants.

processNode.js defines a node component that changes appearance based on state (running, finished, error, cancelled, etc.).

AnimationEdge.js creates animated edge labels that move along the edge path using VueUse transitions.

Overall, the article serves as a practical reference for developers who want to integrate Vue Flow into Vue 3 projects, offering step‑by‑step instructions, code snippets, and best‑practice tips for customizing nodes, edges, handles, theming, and interactive flow control.