Types
Vue Flow is written in TypeScript and exports the types behind its components,
composables, and utilities. Because Vue Flow models flow events as component emits
and instance event hooks (rather than callback props), the event payload types below
(e.g. NodeMouseEvent, ConnectEndEvent) take the place of React Flow’s
on* handler types.
Align
The Align type is the alignment options for a NodeToolbar relative to its node — center, start, or end.
Read moreAriaLabelConfig
The AriaLabelConfig type is the set of accessibility labels and live-region messages Vue Flow uses, which you can override.
Read moreBackgroundVariant
The BackgroundVariant type is the set of pattern styles the Background component can render — dots or lines.
Read moreBaseEdgeProps
The BaseEdgeProps type is the set of props accepted by the BaseEdge component.
Read moreColorMode
The ColorMode type is the resolved color theme of a flow — light or dark.
Read moreConnectEndEvent
The ConnectEndEvent type is the payload of the connect-end event — fired when a connection interaction finishes.
Read moreConnection
The Connection type describes a new connection between two handles — the source and target nodes and their handle ids.
Read moreConnectionLineOptions
The ConnectionLineOptions type configures the temporary line drawn while making a connection — its type, style, and markers.
Read moreConnectionLineProps
The ConnectionLineProps type is the set of props passed to a custom connection line via the connection-line slot.
Read moreConnectionLineType
The ConnectionLineType enum selects the shape of the temporary line drawn while making a connection.
Read moreConnectionMode
The ConnectionMode enum controls whether connections are restricted to source-to-target handles (strict) or allowed between any handles (loose).
Read moreConnectionState
The ConnectionState type describes an in-progress connection — the handles, nodes, and pointer position — or an idle state when nothing is being connected.
Read moreConnectionStatus
The ConnectionStatus type reports whether the current connection is valid, invalid, or absent.
Read moreCoordinateExtent
The CoordinateExtent type describes a bounding box as a pair of x/y corners, used to constrain panning and node movement.
Read moreDefaultEdgeOptions
The DefaultEdgeOptions type is the set of edge properties applied to every new edge via the defaultEdgeOptions prop.
Read moreDimensions
The Dimensions type is a simple width/height pair.
Read moreEdge
An Edge is the complete description with everything Vue Flow needs to know in order to render it.
Read moreEdgeChange
The EdgeChange type is the union of changes Vue Flow reports for edges — selection, add, remove, and replace.
Read moreEdgeChangeset
The EdgeChangeset collects the edge changes Vue Flow reports for an update and applies them to your edges array.
Read moreEdgeMarker
The EdgeMarker type describes an edge marker in detail — its type, size, color, and stroke.
Read moreEdgeMarkerType
The EdgeMarkerType type is what an edge's markerStart/markerEnd accepts — either a marker type string or a full EdgeMarker object.
Read moreEdgeMouseEvent
The EdgeMouseEvent type is the payload of edge pointer events like edge-click and edge-mouse-enter — the native event and the edge.
Read moreEdgeProps
The EdgeProps type is the set of props passed to a custom edge component.
Read moreEdgeReconnectEndEvent
The EdgeReconnectEndEvent type is the payload of the reconnect-end event — fired when an edge reconnection interaction finishes.
Read moreEdgeReconnectEvent
The EdgeReconnectEvent type is the payload of the reconnect event — the original edge and the new connection.
Read moreEdgeReconnectStartEvent
The EdgeReconnectStartEvent type is the payload of the reconnect-start event — the edge and the handle being dragged.
Read moreEdgeReconnectable
The EdgeReconnectable type controls whether an edge can be reconnected, and on which end.
Read moreEdgeTypesObject
The EdgeTypesObject type maps custom edge type names to their components, as passed to the edgeTypes prop.
Read moreFinalConnectionState
The FinalConnectionState type describes the connection at the moment an interaction ends, including whether it was valid and where it was dropped.
Read moreFitViewOptions
The FitViewOptions type configures a fitView call — padding, duration, zoom limits, and which nodes to fit.
Read moreFlowExportObject
The FlowExportObject type is the serializable snapshot of a flow returned by toObject — its nodes, edges, and viewport.
Read moreHandleConnection
The HandleConnection type describes a completed connection as seen from a handle — the source and target with their handle ids and the edge id.
Read moreInternalNode
The InternalNode type is Vue Flow's enriched representation of a node, adding measured size, absolute position, and handle bounds.
Read moreIsValidConnection
The IsValidConnection type is the signature of a function that decides whether an attempted connection is allowed.
Read moreMarkerType
The MarkerType enum is the set of built-in edge marker shapes — an open or closed arrowhead.
Read moreMouseTouchEvent
The MouseTouchEvent type is a native mouse or touch event, used where an interaction can come from either input.
Read moreNoConnection
The NoConnection type is the idle half of ConnectionState — the shape when no connection is in progress.
Read moreNode
The Node type represents everything Vue Flow needs to know about a given node. Many of these properties can be manipulated both by Vue Flow or by you, but some such as width and height should be considered read-only.
Read moreNodeChange
The NodeChange type is the union of changes Vue Flow reports for nodes — position, dimensions, selection, add, remove, and replace.
Read moreNodeChangeset
The NodeChangeset collects the node changes Vue Flow reports for an update and applies them to your nodes array.
Read moreNodeConnection
The NodeConnection type describes a connection attached to a node, returned by the useNodeConnections composable.
Read moreNodeDragEvent
The NodeDragEvent type is the payload of node drag events — the native event, the dragged node, and all nodes being dragged.
Read moreNodeMouseEvent
The NodeMouseEvent type is the payload of node pointer events like node-click and node-mouse-enter — the native event and the node.
Read moreNodeOrigin
The NodeOrigin type sets which point of a node its position refers to, from top-left [0, 0] to bottom-right [1, 1].
Read moreNodeProps
The NodeProps type is the set of props passed to a custom node component.
Read moreNodeTypesObject
The NodeTypesObject type maps custom node type names to their components, as passed to the nodeTypes prop.
Read moreOnBeforeDelete
The OnBeforeDelete type is the signature of a function that can veto or modify a deletion before it happens.
Read moreOnConnectStartParams
The OnConnectStartParams type describes where a connection started — the node, handle, and handle type.
Read moreOnDelete
The OnDelete type is the payload of the delete event — the nodes and edges that were removed.
Read morePanOnScrollMode
The PanOnScrollMode enum restricts scroll-panning to a single axis or allows free panning.
Read morePanelPosition
The PanelPosition type is the set of corners and edges a Panel, MiniMap, or Controls can be positioned at.
Read morePosition
The Position enum describes the four sides a handle can be placed on — top, right, bottom, and left.
Read moreProOptions
The ProOptions type configures Pro-related options, such as hiding the attribution.
Read moreRect
The Rect type describes a rectangle by its top-left position and its width and height.
Read moreSelectionChangeEvent
The SelectionChangeEvent type is the payload of the selection-change event — the currently selected nodes and edges.
Read moreSelectionMode
The SelectionMode enum controls whether a node must be fully or only partially inside the selection box to be selected.
Read moreSnapGrid
The SnapGrid type is an x/y step pair that nodes snap to when snapToGrid is enabled.
Read moreUseNodeConnectionsParams
The UseNodeConnectionsParams type is the options object accepted by the useNodeConnections composable — the node and handle to read connections for, plus optional connect/disconnect callbacks.
Read moreViewport
The Viewport type describes the current pan and zoom of the flow as x, y, and zoom.
Read moreXYPosition
The XYPosition type is a simple x/y coordinate pair, used throughout Vue Flow for positions.
Read moreZIndexMode
The ZIndexMode type controls how Vue Flow assigns z-index to nodes and edges.
Read more