@vue-flow/monorepo • Docs

---

Interface: FlowProps

Properties

applyDefault?

optional applyDefault: boolean

apply default change handlers for position, dimensions, adding/removing nodes. set this to false if you want to apply the changes manually

Deprecated

• will be removed in the next major version, changes will not be auto applied in the future

---

autoConnect?

optional autoConnect: boolean | Connector

automatically create an edge when connection is triggered

Deprecated

• will be removed in the next major version

---

autoPanOnConnect?

optional autoPanOnConnect: boolean

---

autoPanOnNodeDrag?

optional autoPanOnNodeDrag: boolean

---

autoPanSpeed?

optional autoPanSpeed: number

---

connectionLineOptions?

optional connectionLineOptions: ConnectionLineOptions

---

connectionLineStyle?

optional connectionLineStyle: null | CSSProperties

Deprecated

use ConnectionLineOptions.style

---

connectionLineType?

optional connectionLineType: null | ConnectionLineType

Deprecated

use ConnectionLineOptions.type

---

connectionMode?

optional connectionMode: ConnectionMode

---

connectionRadius?

optional connectionRadius: number

---

connectOnClick?

optional connectOnClick: boolean

allow connection with click handlers, i.e. support touch devices

---

defaultEdgeOptions?

optional defaultEdgeOptions: DefaultEdgeOptions

does not work for the addEdge utility!

---

defaultMarkerColor?

optional defaultMarkerColor: string

---

defaultViewport?

optional defaultViewport: Partial<ViewportTransform>

---

deleteKeyCode?

optional deleteKeyCode: null | KeyFilter

---

disableKeyboardA11y?

optional disableKeyboardA11y: boolean

---

edges?

optional edges: Edge[]

---

edgesFocusable?

optional edgesFocusable: boolean

---

edgesUpdatable?

optional edgesUpdatable: EdgeUpdatable

---

edgeTypes?

optional edgeTypes: EdgeTypesObject

either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">)

---

edgeUpdaterRadius?

optional edgeUpdaterRadius: number

---

elementsSelectable?

optional elementsSelectable: boolean

---

elevateEdgesOnSelect?

optional elevateEdgesOnSelect: boolean

elevates edges when selected and applies z-Index to put them above their nodes

---

elevateNodesOnSelect?

optional elevateNodesOnSelect: boolean

elevates nodes when selected and applies z-Index + 1000

---

fitViewOnInit?

optional fitViewOnInit: boolean

will be renamed to fitView

---

id?

optional id: string

---

isValidConnection?

optional isValidConnection: null | ValidConnectionFunc

---

maxZoom?

optional maxZoom: number

---

minZoom?

optional minZoom: number

---

modelValue?

optional modelValue: Elements<any, any, any, any>

all elements (nodes + edges)

Deprecated

use FlowProps.nodes & FlowProps.nodes instead

---

multiSelectionKeyCode?

optional multiSelectionKeyCode: null | KeyFilter

---

nodeDragThreshold?

optional nodeDragThreshold: number

---

nodeExtent?

optional nodeExtent: CoordinateExtent | CoordinateExtentRange

---

nodes?

optional nodes: Node<any, any, string>[]

---

nodesConnectable?

optional nodesConnectable: boolean

---

nodesDraggable?

optional nodesDraggable: boolean

---

nodesFocusable?

optional nodesFocusable: boolean

---

nodeTypes?

optional nodeTypes: NodeTypesObject

either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">)

---

noDragClassName?

optional noDragClassName: string

---

noPanClassName?

optional noPanClassName: string

---

noWheelClassName?

optional noWheelClassName: string

---

onlyRenderVisibleElements?

optional onlyRenderVisibleElements: boolean

---

panActivationKeyCode?

optional panActivationKeyCode: null | KeyFilter

---

paneClickDistance?

optional paneClickDistance: number

Distance that the mouse can move between mousedown/up that will trigger a click

Default

0

---

panOnDrag?

optional panOnDrag: boolean | number[]

move pane on drag, replaced prop paneMovable

---

panOnScroll?

optional panOnScroll: boolean

---

panOnScrollMode?

optional panOnScrollMode: PanOnScrollMode

---

panOnScrollSpeed?

optional panOnScrollSpeed: number

---

preventScrolling?

optional preventScrolling: boolean

If set to false, scrolling inside the viewport will be disabled and instead the page scroll will be used

---

selectionKeyCode?

optional selectionKeyCode: null | false | KeyFilter

---

selectionMode?

optional selectionMode: SelectionMode

---

selectNodesOnDrag?

optional selectNodesOnDrag: boolean

---

snapGrid?

optional snapGrid: SnapGrid

---

snapToGrid?

optional snapToGrid: boolean

---

translateExtent?

optional translateExtent: CoordinateExtent

---

zoomActivationKeyCode?

optional zoomActivationKeyCode: null | KeyFilter

---

zoomOnDoubleClick?

optional zoomOnDoubleClick: boolean

---

zoomOnPinch?

optional zoomOnPinch: boolean

---

zoomOnScroll?

optional zoomOnScroll: boolean