Skip to main content
Vue Flow provides a comprehensive set of components for building interactive node-based diagrams and workflows.

​
Core Components

VueFlow

Main container component for rendering the flow canvas

Handle

Connection point component for nodes

Panel

Floating panel component for UI controls

BaseEdge

Base component for creating custom edges

​
Edge Components

Vue Flow includes several built-in edge types for connecting nodes:

BezierEdge

Curved edge with smooth bezier curves

SimpleBezierEdge

Simplified bezier curve for better performance

SmoothStepEdge

Right-angled edge with smooth corners

StepEdge

Right-angled edge with sharp corners

StraightEdge

Direct straight line connection

​
Edge Utilities

EdgeText

Component for rendering text labels on edges

EdgeLabelRenderer

Portal component for rendering custom edge labels

​
Node Components

Vue Flow provides default node implementations that can be used out of the box:
  • DefaultNode - Standard node with input and output handles
  • InputNode - Node with only output handles
  • OutputNode - Node with only input handles
All default node types can be customized or replaced with your own custom node components.

​
Usage Example

<script setup>
import { VueFlow, Handle, Panel, BezierEdge } from '@vue-flow/core'

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

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

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <Panel position="top-left">
      <button>Controls</button>
    </Panel>
  </VueFlow>
</template>

​
Component Categories

​
Container Components

  • VueFlow - Main flow canvas container
  • Panel - Floating UI panel

​
Connection Components

  • Handle - Node connection points
  • Various edge types for connections

​
Edge Label Components

  • EdgeText - Simple text labels
  • EdgeLabelRenderer - Custom label portal

​
Node Components

  • Built-in node types (Default, Input, Output)
  • Extensible for custom nodes
For detailed information about each component, including props, events, and advanced usage, refer to the individual component documentation pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us