Skip to main content
The VueFlow component is the core container that renders your interactive node graph. It manages nodes, edges, viewport, and all user interactions.

​
Installation

npm install @vue-flow/core

​
Basic Usage

<script setup>
import { VueFlow } from '@vue-flow/core'
import { ref } from 'vue'

const nodes = ref([
  { id: '1', position: { x: 0, y: 0 }, label: 'Node 1' },
  { id: '2', position: { x: 200, y: 100 }, label: 'Node 2' },
])

const edges = ref([
  { id: 'e1-2', source: '1', target: '2' },
])
</script>

<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges" />
</template>

​
Props

​
Model Binding

​
modelValue
Elements
All elements (nodes + edges). Deprecated: Use nodes and edges props instead.
​
nodes
Node[]
Array of nodes to render in the flow.
​
edges
Edge[]
Array of edges to render in the flow.

​
Element Types

​
nodeTypes
NodeTypesObject
Custom node type components. Either use this prop or use slots (<template #node-custom="props">)
​
edgeTypes
EdgeTypesObject
Custom edge type components. Either use this prop or use slots (<template #edge-custom="props">)

​
Interaction

​
nodesDraggable
boolean
Enable/disable node dragging globally.
​
nodesConnectable
boolean
Enable/disable creating connections from nodes.
​
elementsSelectable
boolean
Enable/disable selecting elements.
​
selectNodesOnDrag
boolean
Select nodes when dragging.
​
panOnDrag
boolean | number[]
Enable panning by dragging. Can specify mouse buttons as array.
​
panOnScroll
boolean
Enable panning by scrolling.
​
zoomOnScroll
boolean
Enable zooming by scrolling.
​
zoomOnPinch
boolean
Enable zooming by pinch gesture.
​
zoomOnDoubleClick
boolean
Enable zooming by double-clicking.
​
preventScrolling
boolean
default:"true"
Prevent page scroll when interacting with the flow.

​
Zoom & Viewport

​
minZoom
number
default:"0.5"
Minimum zoom level.
​
maxZoom
number
default:"2"
Maximum zoom level.
​
defaultViewport
Partial<ViewportTransform>
Initial viewport position and zoom.
​
translateExtent
CoordinateExtent
Boundary area for panning.
​
nodeExtent
CoordinateExtent | CoordinateExtentRange
Boundary area for node positions.
​
fitViewOnInit
boolean
Automatically fit the view to show all nodes on initialization.

​
Grid & Snapping

​
snapToGrid
boolean
Enable snapping nodes to grid.
​
snapGrid
[number, number]
default:"[15, 15]"
Grid size for snapping as [x, y].

​
Connections

​
connectionMode
ConnectionMode
How connections behave: 'strict' or 'loose'.
​
connectionLineOptions
ConnectionLineOptions
Styling and type options for the connection line.
​
connectionRadius
number
default:"20"
Radius for detecting connection handles.
​
isValidConnection
ValidConnectionFunc | null
Function to validate connections before they are created.
​
connectOnClick
boolean
Allow connections using click handlers (useful for touch devices).
​
autoConnect
boolean | Connector
Automatically create edges when connections are made. Deprecated.

​
Keyboard

​
deleteKeyCode
KeyFilter | null
default:"'Delete'"
Key(s) to delete selected elements.
​
selectionKeyCode
KeyFilter | boolean | null
Key(s) to enable selection mode.
​
multiSelectionKeyCode
KeyFilter | null
Key(s) for multi-selection.
​
panActivationKeyCode
KeyFilter | null
Key(s) to activate panning mode.
​
zoomActivationKeyCode
KeyFilter | null
Key(s) to activate zoom mode.

​
Rendering

​
onlyRenderVisibleElements
boolean
Only render nodes and edges currently visible in the viewport (performance optimization).
​
elevateEdgesOnSelect
boolean
Elevate edges z-index when selected.
​
elevateNodesOnSelect
boolean
Elevate nodes z-index by +1000 when selected.

​
Edge Options

​
edgesUpdatable
EdgeUpdatable
Enable updating edge connections.
​
defaultEdgeOptions
DefaultEdgeOptions
Default options applied to all edges.
​
defaultMarkerColor
string
Default color for edge markers.

​
Accessibility

​
disableKeyboardA11y
boolean
Disable keyboard accessibility features.
​
edgesFocusable
boolean
Make edges focusable for keyboard navigation.
​
nodesFocusable
boolean
Make nodes focusable for keyboard navigation.

​
Auto Pan

​
autoPanOnConnect
boolean
Automatically pan when connecting near viewport edges.
​
autoPanOnNodeDrag
boolean
Automatically pan when dragging nodes near viewport edges.
​
autoPanSpeed
number
Speed of automatic panning.

​
Other

​
id
string
Unique identifier for this Vue Flow instance.
​
applyDefault
boolean
Apply default change handlers. Deprecated: Will be removed in next major version.
​
selectionMode
SelectionMode
Selection behavior: 'partial' or 'full'.
​
paneClickDistance
number
default:"0"
Maximum mouse movement between mousedown/up to trigger a click.

​
Events

​
Node Events

​
@nodeClick
(event: NodeMouseEvent) => void
Fired when a node is clicked.
​
@nodeDoubleClick
(event: NodeMouseEvent) => void
Fired when a node is double-clicked.
​
@nodeContextMenu
(event: NodeMouseEvent) => void
Fired on node right-click.
​
@nodeMouseEnter
(event: NodeMouseEvent) => void
Fired when mouse enters a node.
​
@nodeMouseMove
(event: NodeMouseEvent) => void
Fired when mouse moves over a node.
​
@nodeMouseLeave
(event: NodeMouseEvent) => void
Fired when mouse leaves a node.
​
@nodeDragStart
(event: NodeDragEvent) => void
Fired when node dragging starts.
​
@nodeDrag
(event: NodeDragEvent) => void
Fired while dragging a node.
​
@nodeDragStop
(event: NodeDragEvent) => void
Fired when node dragging stops.

​
Edge Events

​
@edgeClick
(event: EdgeMouseEvent) => void
Fired when an edge is clicked.
​
@edgeDoubleClick
(event: EdgeMouseEvent) => void
Fired when an edge is double-clicked.
​
@edgeContextMenu
(event: EdgeMouseEvent) => void
Fired on edge right-click.
​
@edgeMouseEnter
(event: EdgeMouseEvent) => void
Fired when mouse enters an edge.
​
@edgeMouseMove
(event: EdgeMouseEvent) => void
Fired when mouse moves over an edge.
​
@edgeMouseLeave
(event: EdgeMouseEvent) => void
Fired when mouse leaves an edge.
​
@edgeUpdate
(event: EdgeUpdateEvent) => void
Fired when an edge connection is updated.
​
@edgeUpdateStart
(event: EdgeMouseEvent) => void
Fired when edge update starts.
​
@edgeUpdateEnd
(event: EdgeMouseEvent) => void
Fired when edge update ends.

​
Connection Events

​
@connect
(connection: Connection) => void
Fired when a new connection is created.
​
@connectStart
(params: OnConnectStartParams) => void
Fired when connection creation starts.
​
@connectEnd
(event?: MouseEvent) => void
Fired when connection creation ends.

​
Pane Events

​
@paneClick
(event: MouseEvent) => void
Fired when the pane (background) is clicked.
​
@paneContextMenu
(event: MouseEvent) => void
Fired on pane right-click.
​
@paneScroll
(event?: WheelEvent) => void
Fired when scrolling on the pane.
​
@paneMouseEnter
(event: MouseEvent) => void
Fired when mouse enters the pane.
​
@paneMouseMove
(event: MouseEvent) => void
Fired when mouse moves over the pane.
​
@paneMouseLeave
(event: MouseEvent) => void
Fired when mouse leaves the pane.

​
Viewport Events

​
@move
(event: FlowTransformEvent) => void
Fired when the viewport is moved.
​
@moveStart
(event: FlowTransformEvent) => void
Fired when viewport movement starts.
​
@moveEnd
(event: FlowTransformEvent) => void
Fired when viewport movement ends.
​
@viewportChange
(viewport: ViewportTransform) => void
Fired when viewport changes.
​
@viewportChangeStart
(viewport: ViewportTransform) => void
Fired when viewport change starts.
​
@viewportChangeEnd
(viewport: ViewportTransform) => void
Fired when viewport change ends.

​
Selection Events

​
@selectionStart
(event: MouseEvent) => void
Fired when selection starts.
​
@selectionEnd
(event: MouseEvent) => void
Fired when selection ends.
​
@selectionDragStart
(event: NodeDragEvent) => void
Fired when dragging selected nodes starts.
​
@selectionDrag
(event: NodeDragEvent) => void
Fired while dragging selected nodes.
​
@selectionDragStop
(event: NodeDragEvent) => void
Fired when dragging selected nodes stops.
​
@selectionContextMenu
(event: { event: MouseEvent; nodes: GraphNode[] }) => void
Fired on selection right-click.

​
State Events

​
@nodesChange
(changes: NodeChange[]) => void
Fired when nodes change (position, selection, etc.).
​
@edgesChange
(changes: EdgeChange[]) => void
Fired when edges change.
​
@nodesInitialized
() => void
Fired when all nodes are initialized.
​
@init
(instance: VueFlowStore) => void
Fired when the Vue Flow instance is initialized.
​
@error
(error: VueFlowError) => void
Fired when an error occurs.

​
Slots

​
default
Content rendered outside the viewport (not affected by zoom/pan).
​
zoom-pane
Content rendered inside the viewport (affected by zoom/pan).
​
connection-line
(props: ConnectionLineProps) => any
Custom connection line component.
​
node-{type}
(props: NodeProps) => any
Custom node type component. Replace {type} with your node type.
​
edge-{type}
(props: EdgeProps) => any
Custom edge type component. Replace {type} with your edge type.

​
Complete Example

<script setup>
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import { ref } from 'vue'

const nodes = ref([
  {
    id: '1',
    type: 'input',
    position: { x: 250, y: 5 },
    label: 'Input Node',
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    label: 'Default Node',
  },
  {
    id: '3',
    type: 'output',
    position: { x: 400, y: 200 },
    label: 'Output Node',
  },
])

const edges = ref([
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e2-3', source: '2', target: '3' },
])

const { onConnect } = useVueFlow()

onConnect((params) => {
  edges.value.push(params)
})
</script>

<template>
  <VueFlow
    v-model:nodes="nodes"
    v-model:edges="edges"
    :default-zoom="1.5"
    :min-zoom="0.2"
    :max-zoom="4"
    fit-view-on-init
  >
    <Background />
    <Controls />
    <MiniMap />
  </VueFlow>
</template>

<style>
@import '@vue-flow/core/dist/style.css';
</style>
The VueFlow component provides access to its internal state via the useVueFlow composable. You can use this to programmatically control the flow, access nodes/edges, and more.

Build docs developers (and LLMs) love

Get started for freeTalk to us