Composables

setupVueFlow()

The setupVueFlow composable creates a Vue Flow store, provides it to the current component's subtree, and returns the flow instance — the composable alternative to the VueFlowProvider component.

storeToRefs()

The storeToRefs helper destructures the reactive Vue Flow state into refs without losing reactivity.

The useConnection composable returns the current connection while there is an active connection interaction. When no connection is in progress it reports inProgress false with null fields. A typical use is to colorize handles based on whether the connection is valid.

useEdge()

The useEdge composable returns the edge for a given id along with its DOM element. Inside a custom edge the id defaults to the current edge.

useEdgesData()

The useEdgesData composable returns the data of one or more edges by id, and re-runs only when that data changes.

useHandle()

The useHandle composable exposes the low-level connect logic (drag- and click-to-connect) behind the Handle component, for building fully custom handles.

useInternalNode()

The useInternalNode composable returns the internal node for a given id — the enriched representation with measured size, absolute position, and handle bounds.

useKeyPress()

The useKeyPress composable returns a reactive boolean that tracks whether a given key or key combination is currently pressed.

useNode()

The useNode composable returns the user-facing node for a given id, along with its DOM element, parent node, and connected edges. Inside a custom node the id defaults to the current node.

useNodeConnections()

The useNodeConnections composable returns the connections of a node, optionally filtered by handle type and handle id, and can run callbacks when connections are created or removed.

useNodeId()

The useNodeId composable returns the id of the node a component is rendered in. It only returns a value inside a custom node.

useNodesData()

The useNodesData composable returns the data of one or more nodes by id, and re-runs only when that data changes. Handy for reading upstream nodes' data in a custom node.

useNodesInitialized()

The useNodesInitialized composable returns a reactive boolean that becomes true once every node has been measured.

useVueFlow()

The useVueFlow composable returns the Vue Flow instance — a curated set of actions, computed getters, and event hooks for reading and manipulating a flow.

useVueFlowStore()

The useVueFlowStore composable returns the raw reactive Vue Flow state, for when you need to read internal store fields directly.