Skip to main content
Vue Flow provides a comprehensive set of composables for accessing and manipulating flow state reactively.

​
Core Composables

useVueFlow

Main composable providing access to the entire flow state and actions

useNode

Access node data, parent node, and connected edges

useEdge

Access edge data and DOM element

useHandle

Handle connection events and validation

​
Node & Edge Data

useNodesData

Access reactive node data by ID(s)

useEdgesData

Access reactive edge data by ID(s)

useNodeId

Get the current node ID from context

useNodesInitialized

Check if specific nodes are initialized

​
Connection State

useConnection

Access current connection state during connection

useHandleConnections

Get all connections for a specific handle

useNodeConnections

Get all connections for a specific node

​
Utilities

useZoomPanHelper

Helper functions for viewport manipulation

useGetPointerPosition

Get pointer position relative to flow

useKeyPress

React to keyboard events

​
Usage Examples

<script setup>
import { useVueFlow } from '@vue-flow/core'

const { 
  nodes,
  edges,
  addNodes,
  addEdges,
  onConnect,
  viewport 
} = useVueFlow()

// Add nodes and edges
addNodes([{ id: '1', position: { x: 0, y: 0 }, label: 'Node 1' }])

// Handle connections
onConnect((connection) => {
  addEdges([connection])
})
</script>

​
Composable Categories

​
State Management

  • useVueFlow - Complete flow state access
  • useNode - Node-specific state
  • useEdge - Edge-specific state

​
Data Access

  • useNodesData - Reactive node data
  • useEdgesData - Reactive edge data
  • useNodeId - Context-based ID access

​
Connection Management

  • useHandle - Handle event listeners
  • useConnection - Active connection state
  • useHandleConnections - Handle connection list
  • useNodeConnections - Node connection list

​
Viewport & Interaction

  • useZoomPanHelper - Viewport controls
  • useGetPointerPosition - Pointer tracking
  • useKeyPress - Keyboard interaction

​
Initialization

  • useNodesInitialized - Node initialization status
TypeScript Support: All composables are fully typed with TypeScript. You can provide generic type parameters for custom node/edge data:
interface MyNodeData {
  label: string
  count: number
}

const { node } = useNode<MyNodeData>()
// node.data is typed as MyNodeData

​
Context Requirements

Some composables require being called within a Vue Flow context:
  • useNode - Must be called within a custom node component or its children
  • useEdge - Must be called within a custom edge component or its children
  • useNodeId - Must be called within a node context
  • useVueFlow - Can create a new instance or access existing context
For detailed information about each composable, including parameters, return values, and advanced usage patterns, refer to the individual composable documentation pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us