Node Types

Node

The base interface for defining nodes in Vue Flow.

string

required

Unique node identifier

position

XYPosition

required

Initial node position (x, y coordinates)

type

string

Node type - can be a default type or a custom type

label

string | VNode | Component

Deprecated - will be removed in next major release and replaced with { data: { label: string | VNode | Component } }

A node label

data

any

Additional data that is passed to your custom components

Interaction Properties

draggable

boolean

Enable or disable dragging for this node

selectable

boolean

Enable or disable selecting this node

connectable

HandleConnectable

Enable or disable connecting this node. Can be boolean, number, 'single', or a function

focusable

boolean

Enable or disable focusing this node (accessibility)

deletable

boolean

Enable or disable deleting this node

dragHandle

string

CSS selector for element to use as drag handle. Node can only be dragged from this element

Handle Positions

sourcePosition

Position

Position of source handles. Can be 'left', 'top', 'right', or 'bottom'

targetPosition

Position

Position of target handles. Can be 'left', 'top', 'right', or 'bottom'

Dimensions

width

number | string | WidthFunc

Fixed width of node, applied as style. Pass a number for pixel values or a string with units (e.g., '10rem')

height

number | string | HeightFunc

Fixed height of node, applied as style. Pass a number for pixel values or a string with units (e.g., '10rem')

Parent/Child Relationships

parentNode

string

Will be renamed to parentId in next major release

Define node as a child node by setting a parent node id

extent

CoordinateExtent | CoordinateExtentRange | 'parent'

Define node extent - the area in which the node can be moved

expandParent

boolean

Expands parent area to fit child node

Styling

class

string | string[] | Record<string, any> | ClassFunc<GraphNode>

Additional class names. Can be a string, array, object, or callback returning a string

style

Styles | StyleFunc<GraphNode>

Additional styles. Can be an object or a callback returning an object

hidden

boolean

Hide or show the node

zIndex

number

z-index for the node

Accessibility

ariaLabel

string

Aria label for the node

domAttributes

HTMLAttributes

General escape hatch for adding custom attributes to the node’s DOM element

Deprecated Properties

isValidTargetPos

ValidConnectionFunc

Deprecated - will be removed in next major release

Called when used as target for new connection

isValidSourcePos

ValidConnectionFunc

Deprecated - will be removed in next major release

Called when used as source for new connection

template

NodeComponent

Deprecated - will be removed in next major release

Overwrites current node type

events

Partial<NodeEventsHandler>

Deprecated - will be removed in next major release

Contextual and custom events that are passed to your custom components

GraphNode

Internal node type that extends Node with computed properties. This is what Vue Flow uses internally after parsing your nodes.

computedPosition

XYZPosition

Absolute position in relation to parent elements plus z-index

handleBounds

NodeHandleBounds

Bounds for source and target handles

interface NodeHandleBounds {
  source: HandleElement[] | null
  target: HandleElement[] | null
}

dimensions

Dimensions

Node width and height

interface Dimensions {
  width: number
  height: number
}

isParent

boolean

Whether this node has child nodes

selected

boolean

Whether the node is currently selected

resizing

boolean

Whether the node is currently being resized

dragging

boolean

Whether the node is currently being dragged

NodeProps

Props passed to node components when rendering custom nodes.

string

Unique node id

type

string

Node type

selected

boolean

Whether node is selected

connectable

HandleConnectable

Can node handles be connected. You need to forward this to your handles for this prop to have any effect

position

XYPosition

Deprecated - will be removed in next major release and replaced with computedPosition

Node x, y (relative) position on graph

dimensions

Dimensions

DOM element dimensions (width, height)

data

any

Additional data of node

dragging

boolean

Whether node is currently dragging

resizing

boolean

Whether node is currently resizing

zIndex

number

Node z-index

targetPosition

Position

Handle position

sourcePosition

Position

Handle position

dragHandle

string

Drag handle query selector

parentNodeId

string

Parent node id

CoordinateExtent

Defines a rectangular area as coordinate boundaries.

type CoordinateExtent = [
  extentFrom: [fromX: number, fromY: number], 
  extentTo: [toX: number, toY: number]
]

Example

// Restrict node to area between (0,0) and (1000, 1000)
const extent: CoordinateExtent = [[0, 0], [1000, 1000]]

const node = {
  id: '1',
  position: { x: 100, y: 100 },
  extent
}

CoordinateExtentRange

Defines node extent with padding options.

range

'parent' | CoordinateExtent

required

Either 'parent' to use parent node boundaries, or a CoordinateExtent

padding

number | number[]

required

Values are top, right, bottom, left (same as CSS padding)

number - same padding on all sides
[padding] - same padding on all sides
[paddingY, paddingX] - vertical and horizontal padding
[paddingTop, paddingX, paddingBottom] - top, horizontal, bottom
[paddingTop, paddingRight, paddingBottom, paddingLeft] - all four sides

Example

const extentRange: CoordinateExtentRange = {
  range: 'parent',
  padding: [10, 20] // 10px vertical, 20px horizontal
}

const childNode = {
  id: '2',
  parentNode: '1',
  position: { x: 50, y: 50 },
  extent: extentRange
}

Position

Enum for handle positions.

enum Position {
  Left = 'left',
  Top = 'top',
  Right = 'right',
  Bottom = 'bottom'
}

XYPosition

Simple coordinate position.

interface XYPosition {
  x: number
  y: number
}

XYZPosition

Coordinate position with z-index.

type XYZPosition = XYPosition & { z: number }

Type Utilities

ToGraphNode

Transform a Node type to a GraphNode type.

type ToGraphNode<T extends Node> = GraphNode<
  T extends Node<infer Data> ? Data : never,
  T extends Node<any, infer Events> ? Events : never,
  T extends Node<any, any, infer Type> ? Type : never
>

Example Usage

interface MyNodeData {
  label: string
  value: number
}

type MyNode = Node<MyNodeData>
type MyGraphNode = ToGraphNode<MyNode>

const node: MyNode = {
  id: '1',
  position: { x: 0, y: 0 },
  data: { label: 'Node 1', value: 42 }
}

Core API

Composables

Types

Plugin APIs

Node

Interaction Properties

Handle Positions

Dimensions

Parent/Child Relationships

Styling

Accessibility

Deprecated Properties

GraphNode

NodeProps

CoordinateExtent

Example

CoordinateExtentRange

Example

Position

XYPosition

XYZPosition

Type Utilities

ToGraphNode

Example Usage

Build docs developers (and LLMs) love

Core API

Composables

Types

Plugin APIs

​Node

​Interaction Properties

​Handle Positions

​Dimensions

​Parent/Child Relationships

​Styling

​Accessibility

​Deprecated Properties

​GraphNode

​NodeProps

​CoordinateExtent

​Example

​CoordinateExtentRange

​Example

​Position

​XYPosition

​XYZPosition

​Type Utilities

​ToGraphNode

​Example Usage

Build docs developers (and LLMs) love

Node

Interaction Properties

Handle Positions

Dimensions

Parent/Child Relationships

Styling

Accessibility

Deprecated Properties

GraphNode

NodeProps

CoordinateExtent

Example

CoordinateExtentRange

Example

Position

XYPosition

XYZPosition

Type Utilities

ToGraphNode

Example Usage