useVueFlow is the main composable that provides access to a Vue Flow store instance. It gives you access to the entire state, all actions, and event hooks for managing your flow diagram.Usage Basic Usage
With Store ID
With Options
< script setup > import { useVueFlow } from '@vue-flow/core' const { nodes , edges , addNodes , addEdges } = useVueFlow () // Add nodes programmatically addNodes ([ { id: '1' , position: { x: 0 , y: 0 }, data: { label: 'Node 1' } }, { id: '2' , position: { x: 100 , y: 100 }, data: { label: 'Node 2' } } ]) // Add edges addEdges ([ { id: 'e1-2' , source: '1' , target: '2' } ]) </ script >
Signature function useVueFlow ( id ?: string ) : VueFlowStore function useVueFlow ( options ?: FlowOptions ) : VueFlowStore
Parameters The ID of a specific store instance to access. If not provided, the store is injected from context.
Options to create or configure a store instance. Includes:
id - Store identifiernodes - Initial nodesedges - Initial edgesmodelValue - Elements (nodes + edges)And all other flow configuration options
Return Value Returns a VueFlowStore object containing:
State Properties Current viewport transform (x, y, zoom)
Viewport dimensions (width, height)
Reference to the Vue Flow container element
Reference to the viewport element
Node Actions addNodes
(nodes: Node | Node[]) => void
Add one or more nodes to the flow
Replace all nodes in the flow
removeNodes
(nodes: string | Node | Array) => void
Remove nodes by ID or node object. Optionally removes connected edges and children.
updateNode
(id: string, update: Partial<Node>) => void
Update a specific node by ID
updateNodeData
(id: string, dataUpdate: Partial<Data>) => void
Update only the data property of a node
findNode
(id: string) => GraphNode | undefined
Find a node by its ID
applyNodeChanges
(changes: NodeChange[]) => GraphNode[]
Apply an array of node changes (used internally for reactivity)
Edge Actions addEdges
(edges: Edge | Connection | Array) => void
Add one or more edges to the flow
Replace all edges in the flow
removeEdges
(edges: string | Edge | Array) => void
Remove edges by ID or edge object
updateEdge
(oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false
Update an existing edge with a new connection
updateEdgeData
(id: string, dataUpdate: Partial<Data>) => void
Update only the data property of an edge
findEdge
(id: string) => GraphEdge | undefined
Find an edge by its ID
applyEdgeChanges
(changes: EdgeChange[]) => GraphEdge[]
Apply an array of edge changes (used internally for reactivity)
Viewport Actions fitView
(options?: FitViewOptions) => Promise<boolean>
Fit the view to show all nodes
zoomIn
(options?: TransitionOptions) => Promise<boolean>
Zoom in the viewport
zoomOut
(options?: TransitionOptions) => Promise<boolean>
Zoom out the viewport
zoomTo
(zoomLevel: number, options?: TransitionOptions) => Promise<boolean>
Set zoom to a specific level
setViewport
(transform: ViewportTransform, options?: TransitionOptions) => Promise<boolean>
Set the viewport transform (position and zoom)
Get the current viewport transform
setCenter
(x: number, y: number, options?: SetCenterOptions) => Promise<boolean>
Center the viewport on specific coordinates
fitBounds
(bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>
Fit the viewport to specific bounds
project
(position: XYPosition) => XYPosition
Convert screen coordinates to flow coordinates
Selection Actions addSelectedNodes
(nodes: GraphNode[]) => void
Add nodes to the current selection
addSelectedEdges
(edges: GraphEdge[]) => void
Add edges to the current selection
removeSelectedNodes
(nodes: GraphNode[]) => void
Remove nodes from the current selection
removeSelectedEdges
(edges: GraphEdge[]) => void
Remove edges from the current selection
removeSelectedElements
(elements?: Elements) => void
Clear the selection (or remove specific elements from selection)
Event Hooks onNodesChange
(handler: (changes: NodeChange[]) => void) => void
Listen to node changes
onEdgesChange
(handler: (changes: EdgeChange[]) => void) => void
Listen to edge changes
onConnect
(handler: (connection: Connection) => void) => void
Listen to new connections
onNodeClick
(handler: NodeMouseEvent) => void
Listen to node click events
onEdgeClick
(handler: EdgeMouseEvent) => void
Listen to edge click events
Examples Managing Nodes and Edges < script setup > import { useVueFlow } from '@vue-flow/core' import { ref } from 'vue' const { nodes , edges , addNodes , removeNodes , findNode } = useVueFlow () function addNewNode () { const newNode = { id: `node- ${ Date . now () } ` , position: { x: Math . random () * 400 , y: Math . random () * 400 }, data: { label: 'New Node' } } addNodes ( newNode ) } function removeNode ( nodeId : string ) { removeNodes ( nodeId , true ) // true = remove connected edges } function getNodeData ( nodeId : string ) { const node = findNode ( nodeId ) return node ?. data } </ script >
Working with Viewport < script setup > import { useVueFlow } from '@vue-flow/core' import { onMounted } from 'vue' const { fitView , zoomTo , setCenter } = useVueFlow () onMounted (() => { // Fit all nodes in view when component mounts fitView ({ padding: 0.2 }) }) function resetView () { zoomTo ( 1 ) // Reset zoom to 100% setCenter ( 0 , 0 ) // Center on origin } </ script >
Listening to Events < script setup > import { useVueFlow } from '@vue-flow/core' import { onMounted } from 'vue' const { onNodeClick , onConnect , onNodesChange } = useVueFlow () onMounted (() => { onNodeClick (( event ) => { console . log ( 'Node clicked:' , event . node ) }) onConnect (( connection ) => { console . log ( 'Nodes connected:' , connection ) }) onNodesChange (( changes ) => { console . log ( 'Nodes changed:' , changes ) }) }) </ script >
Notes
If no ID is provided, the store instance is injected from context (automatically available inside <VueFlow> component)
If no store instance is found in context, a new store instance is created and registered in storage
When passing options object, it will create a new store or update an existing one with those options
The store is automatically destroyed when the scope is disposed