Skip to main content
Vue Flow is fully typed with TypeScript, providing comprehensive type definitions for all components, composables, and utilities.

​
Core Types

Node

Node object structure and configuration

Edge

Edge object structure and configuration

GraphNode

Internal graph node with computed properties

GraphEdge

Internal graph edge with computed properties

​
Connection Types

Connection

Connection object for edge creation

ConnectionInProgress

Active connection state during dragging

HandleElement

Handle DOM element with metadata

HandleType

Handle type enum: ‘source’ or ‘target’

​
Position & Geometry

XYPosition

2D coordinate position

XYZPosition

3D coordinate position with z-index

Dimensions

Width and height dimensions

Rect

Rectangle with position and dimensions

Box

Bounding box with x, y, x2, y2 coordinates

Position

Handle position enum (Top, Right, Bottom, Left)

​
Viewport & Transform

ViewportTransform

Viewport transformation with x, y, and zoom

CoordinateExtent

Min and max coordinate boundaries

Padding

Padding configuration for viewport

​
State & Changes

NodeChange

Node change events for state updates

EdgeChange

Edge change events for state updates

FlowOptions

Configuration options for VueFlow

VueFlowStore

Complete store state and methods

​
Hooks & Events

CustomEvent

Custom event handler type

ElementData

Generic data structure for nodes/edges

​
Markers & Styling

EdgeMarkerType

Edge marker configuration (arrows, dots)

DefaultEdgeOptions

Default options for all edges

​
Type Usage Examples

import type { 
  Node, 
  Edge, 
  XYPosition,
  Connection 
} from '@vue-flow/core'

// Define nodes with typed data
interface MyNodeData {
  label: string
  count: number
}

const nodes: Node<MyNodeData>[] = [
  {
    id: '1',
    type: 'custom',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1', count: 0 }
  }
]

// Define edges
const edges: Edge[] = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'bezier'
  }
]

​
Type Categories

​
Element Types

  • Node, Edge - Basic element structures
  • GraphNode, GraphEdge - Internal computed elements
  • Element, FlowElements - Union types

​
Connection Types

  • Connection - Connection parameters
  • HandleType, HandleElement - Handle definitions
  • ValidConnectionFunc - Connection validation

​
Position Types

  • XYPosition, XYZPosition - Coordinates
  • Position - Handle position enum
  • Rect, Box - Geometric shapes
  • Dimensions - Size properties

​
Transform Types

  • ViewportTransform - Viewport state
  • CoordinateExtent - Boundaries
  • Padding - Spacing configuration

​
Change Types

  • NodeChange - Node state changes
  • EdgeChange - Edge state changes
  • Change subtypes (add, remove, select, position, dimensions)

​
Store Types

  • VueFlowStore - Complete store interface
  • FlowOptions - Configuration options
  • DefaultEdgeOptions - Edge defaults

​
Event Types

  • CustomEvent - Custom event handlers
  • MouseTouchEvent - Pointer events
  • Various callback types

​
Type Guards

Vue Flow provides type guard functions for runtime type checking: 
import { isNode, isEdge, isGraphNode, isGraphEdge } from '@vue-flow/core'

const element: Node | Edge = getElement()

if (isNode(element)) {
  // element is typed as Node
  console.log(element.position)
}

if (isEdge(element)) {
  // element is typed as Edge
  console.log(element.source, element.target)
}
Generic Type Parameters: Most types accept generic parameters for custom data and events:
  • Node<Data, CustomEvents>
  • Edge<Data, CustomEvents>
  • GraphNode<Data, CustomEvents>
  • GraphEdge<Data, CustomEvents>
This allows for full type safety with your custom data structures.

​
Exported Type Utilities

Vue Flow also exports utility types for advanced use cases:
  • Elements - Array of nodes and edges
  • FlowElements - Array of graph nodes and edges
  • MaybeElement - Node, Edge, or unknown
  • NodeLookup - Map of node IDs to nodes
  • PaddingWithUnit - Padding with units (px, %)
For detailed information about each type, including all properties and usage examples, refer to the individual type documentation pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us