FlowEvents
All available events in Vue Flow.
Node Events
Fired when a node is clicked
Fired when a node is double clicked
Fired when mouse enters a node
Fired when mouse moves over a node
Fired when mouse leaves a node
Fired when right-clicking a node
Fired when starting to drag a node
Fired while dragging a node
Fired when stopping dragging a node
Fired when all nodes have been initialized with dimensions
Edge Events
Fired when an edge is clicked
Fired when an edge is double clicked
Fired when mouse enters an edge
Fired when mouse moves over an edge
Fired when mouse leaves an edge
Fired when right-clicking an edge
Fired when an edge is updated (reconnected)
Fired when starting to update an edge
Fired when ending edge update
Connection Events
Fired when a new connection is created
connectStart
{ event?: MouseEvent | TouchEvent } & OnConnectStartParams
Fired when starting to create a connection
connectEnd
MouseEvent | TouchEvent | undefined
Fired when ending connection attempt
clickConnectStart
{ event?: MouseEvent | TouchEvent } & OnConnectStartParams
Fired when starting click-based connection
clickConnectEnd
MouseEvent | TouchEvent | undefined
Fired when ending click-based connection
Viewport Events
move
{ event: D3ZoomEvent | WheelEvent; flowTransform: ViewportTransform }
Fired while moving the viewport
moveStart
{ event: D3ZoomEvent | WheelEvent; flowTransform: ViewportTransform }
Fired when starting to move the viewport
moveEnd
{ event: D3ZoomEvent | WheelEvent; flowTransform: ViewportTransform }
Fired when ending viewport movement
Fired when viewport changes
Fired when starting viewport change
Fired when ending viewport change
Pane Events
Fired when clicking the pane
Fired when right-clicking the pane
Fired when scrolling on the pane
Fired when mouse enters the pane
Fired when mouse moves over the pane
Fired when mouse leaves the pane
Selection Events
Fired when starting selection
Fired when ending selection
Fired when starting to drag selected nodes
Fired while dragging selected nodes
Fired when stopping dragging selected nodes
Fired when right-clicking selection
Minimap Events
Fired when clicking a node on the minimap
Fired when double clicking a node on the minimap
Fired when mouse enters a node on the minimap
Fired when mouse moves over a node on the minimap
Fired when mouse leaves a node on the minimap
Change Events
Fired when nodes change (add, remove, position, etc.)
Fired when edges change (add, remove, select, etc.)
Lifecycle Events
Fired when Vue Flow is initialized
Deprecated - use init instead
Fired when node internals are updated
Fired when an error occurs
Event Object Types
NodeMouseEvent
Mouse event on a node.
interface NodeMouseEvent {
event: MouseTouchEvent
node: GraphNode
}
event
MouseEvent | TouchEvent
required
The native mouse or touch event
The node that was interacted with
NodeDragEvent
Drag event on node(s).
interface NodeDragEvent {
event: MouseTouchEvent
node: GraphNode
nodes: GraphNode[]
}
event
MouseEvent | TouchEvent
required
The native mouse or touch event
The primary node being dragged
All nodes being dragged (including multi-selection)
EdgeMouseEvent
Mouse event on an edge.
interface EdgeMouseEvent {
event: MouseTouchEvent
edge: GraphEdge
}
event
MouseEvent | TouchEvent
required
The native mouse or touch event
The edge that was interacted with
EdgeUpdateEvent
Event when an edge is updated (reconnected).
interface EdgeUpdateEvent {
event: MouseTouchEvent
edge: GraphEdge
connection: Connection
}
event
MouseEvent | TouchEvent
required
The native mouse or touch event
The new connection parameters
Event Handlers
NodeEventsHandler
Event handlers available on nodes.
type NodeEventsHandler<CustomEvents = object> = {
doubleClick: (event: NodeMouseEvent) => void | { off: () => void }
click: (event: NodeMouseEvent) => void | { off: () => void }
mouseEnter: (event: NodeMouseEvent) => void | { off: () => void }
mouseMove: (event: NodeMouseEvent) => void | { off: () => void }
mouseLeave: (event: NodeMouseEvent) => void | { off: () => void }
contextMenu: (event: NodeMouseEvent) => void | { off: () => void }
dragStart: (event: NodeDragEvent) => void | { off: () => void }
drag: (event: NodeDragEvent) => void | { off: () => void }
dragStop: (event: NodeDragEvent) => void | { off: () => void }
} & CustomEventHandlers<CustomEvents>
EdgeEventsHandler
Event handlers available on edges.
type EdgeEventsHandler<CustomEvents = object> = {
doubleClick: (event: EdgeMouseEvent) => void | { off: () => void }
click: (event: EdgeMouseEvent) => void | { off: () => void }
mouseEnter: (event: EdgeMouseEvent) => void | { off: () => void }
mouseMove: (event: EdgeMouseEvent) => void | { off: () => void }
mouseLeave: (event: EdgeMouseEvent) => void | { off: () => void }
contextMenu: (event: EdgeMouseEvent) => void | { off: () => void }
updateStart: (event: EdgeMouseEvent) => void | { off: () => void }
update: (event: EdgeUpdateEvent) => void | { off: () => void }
updateEnd: (event: EdgeMouseEvent) => void | { off: () => void }
} & CustomEventHandlers<CustomEvents>
Custom Events
Define custom events for your nodes and edges.
type CustomEvent<Args extends any[] = any[], Return = any> =
(...args: Args) => Return
Example
import type { Node, CustomEvent } from '@vue-flow/core'
interface MyCustomEvents {
expand: CustomEvent<[expanded: boolean], void>
delete: CustomEvent<[], void>
}
type MyNode = Node<MyData, MyCustomEvents>
const node: MyNode = {
id: '1',
position: { x: 0, y: 0 },
data: { label: 'Custom Node' },
events: {
expand: (expanded) => {
console.log('Expanded:', expanded)
},
delete: () => {
console.log('Delete node')
}
}
}
FlowHooks
Hook interfaces for all Flow events.
type FlowHooks = Readonly<{
[key in keyof FlowEvents]: EventHookExtended<FlowEvents[key]>
}>
Example Usage
import { useVueFlow } from '@vue-flow/core'
const { hooks } = useVueFlow()
// Listen to node click events
hooks.value.nodeClick.on(({ node, event }) => {
console.log('Node clicked:', node.id)
})
// Listen to connection events
hooks.value.connect.on((connection) => {
console.log('Connected:', connection)
})
FlowHooksOn
Convenience type with on prefix for event handlers.
type FlowHooksOn = Readonly<{
[key in keyof FlowEvents as `on${Capitalize<key>}`]:
EventHookOn<FlowEvents[key]>
}>
Example
import { useVueFlow } from '@vue-flow/core'
const { onNodeClick, onConnect } = useVueFlow()
onNodeClick(({ node }) => {
console.log('Clicked:', node.id)
})
onConnect((connection) => {
console.log('Connected:', connection)
})