<VueFlow />

The <VueFlow /> component is the heart of your Vue Flow application.


<script setup lang="ts">
import { shallowRef } from 'vue';
import { VueFlow, type Node, type Edge } from '@xyflow/vue';
import '@xyflow/vue/style.css';
 
const nodes = shallowRef<Node[]>([
  { id: 'a', data: { label: 'node a' }, position: { x: 0, y: 0 } },
  { id: 'b', data: { label: 'node b' }, position: { x: 0, y: 100 } }
]);
 
const edges = shallowRef<Edge[]>([
  { id: 'e1-2', source: 'a', target: 'b' }
]);
</script>
 
<VueFlow
  :nodes="nodes"
  :edges="edges"
  fit-view
/>

This component takes a lot of different props, most of which are optional. We’ve tried to document them in groups that make sense to help you find your way.

Common props

These are the props you will most commonly use when working with Vue Flow.

Name	Type	Default
`...props`	`HTMLAttributes<HTMLDivElement>`

Viewport props

Name	Type	Default
`defaultViewport`	`FlowProps`
`fitView`	`FlowProps`
`fitViewOptions`	`FlowProps`
`minZoom`	`FlowProps`
`maxZoom`	`FlowProps`
`snapGrid`	`FlowProps`
`onlyRenderVisibleElements`	`FlowProps`
`translateExtent`	`FlowProps`
`preventScrolling`	`FlowProps`
`attributionPosition`	`FlowProps`

Node props

Name	Type	Default
`nodeOrigin`	`FlowProps`
`nodesDraggable`	`FlowProps`
`nodesConnectable`	`FlowProps`
`nodesFocusable`	`FlowProps`
`nodeDragThreshold`	`FlowProps`
`nodeClickDistance`	`FlowProps`
`nodeExtent`	`FlowProps`
`elevateNodesOnSelect`	`FlowProps`

Edge props

Name	Type	Default
`edgesFocusable`	`FlowProps`
`elevateEdgesOnSelect`	`FlowProps`
`defaultMarkerColor`	`FlowProps`
`defaultEdgeOptions`	`FlowProps`

Event handlers

General Events

Name	Type	Default
`init`	`FlowProps`
`error`	`FlowProps`
`delete`	`FlowProps`
`onBeforeDelete`	`FlowProps`

Node Events

Name	Type	Default
`nodeClick`	`FlowProps`
`nodeDoubleClick`	`FlowProps`
`nodeMouseEnter`	`FlowProps`
`nodeMouseMove`	`FlowProps`
`nodeMouseLeave`	`FlowProps`
`nodeContextMenu`	`FlowProps`
`nodeDragStart`	`FlowProps`
`nodeDrag`	`FlowProps`
`nodeDragStop`	`FlowProps`

Edge Events

Name	Type	Default
`edgeContextMenu`	`FlowProps`
`edgeMouseEnter`	`FlowProps`
`edgeMouseMove`	`FlowProps`
`edgeMouseLeave`	`FlowProps`
`edgeDoubleClick`	`FlowProps`
`edgeClick`	`FlowProps`
`reconnectStart`	`FlowProps`
`reconnectEnd`	`FlowProps`

Selection Events

Name	Type	Default
`selectionChange`	`FlowProps`
`selectionContextMenu`	`FlowProps`
`selectionDragStart`	`FlowProps`
`selectionDrag`	`FlowProps`
`selectionDragStop`	`FlowProps`
`selectionStart`	`FlowProps`
`selectionEnd`	`FlowProps`

Pane Events

Name	Type	Default
`paneClick`	`FlowProps`
`paneContextMenu`	`FlowProps`
`paneMouseEnter`	`FlowProps`
`paneMouseMove`	`FlowProps`
`paneMouseLeave`	`FlowProps`
`paneScroll`	`FlowProps`

Connection Events

Name	Type	Default
`connect`	`FlowProps`
`connectStart`	`FlowProps`
`connectEnd`	`FlowProps`
`isValidConnection`	`FlowProps`
`clickConnectStart`	`FlowProps`
`clickConnectEnd`	`FlowProps`

Connection line props

Name	Type	Default
`connectionRadius`	`FlowProps`
`connectionDragThreshold`	`FlowProps`
`connectionLineOptions`	`FlowProps`

Interaction props

Name	Type	Default
`elementsSelectable`	`FlowProps`
`autoPanOnConnect`	`FlowProps`
`autoPanOnNodeDrag`	`FlowProps`
`autoPanOnSelection`	`FlowProps`
`selectNodesOnDrag`	`FlowProps`
`panOnDrag`	`FlowProps`
`selectionOnDrag`	`FlowProps`
`selectionMode`	`FlowProps`
`panOnScroll`	`FlowProps`
`panOnScrollMode`	`FlowProps`
`panOnScrollSpeed`	`FlowProps`
`zoomOnScroll`	`FlowProps`
`zoomOnPinch`	`FlowProps`
`zoomOnDoubleClick`	`FlowProps`
`connectionMode`	`FlowProps`
`paneClickDistance`	`FlowProps`
`zIndexMode`	`FlowProps`

Keyboard props

Name	Type	Default
`deleteKeyCode`	`FlowProps`
`selectionKeyCode`	`FlowProps`
`multiSelectionKeyCode`	`FlowProps`
`zoomActivationKeyCode`	`FlowProps`
`panActivationKeyCode`	`FlowProps`
`disableKeyboardA11y`	`FlowProps`

Style props

Applying certain classes to elements rendered inside the canvas will change how interactions are handled. These props let you configure those class names if you need to.

Name	Type	Default
`noPanClassName`	`FlowProps`
`noDragClassName`	`FlowProps`
`noWheelClassName`	`FlowProps`

Notes

The props of this component get exported as VueFlowProps