無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
Building interactive node-based interfaces – whether for workflow editors, visual programming tools, or data pipeline designers – is one of the most challenging tasks in frontend development. You need to handle zooming and panning, node dragging and positioning, edge routing and rendering, and all the complexity of graph interaction. Vue Flow brings the power of React Flow’s interaction model to the Vue 3 ecosystem, providing a polished, performant, and deeply customizable flowchart component.
Created by bcakmakoglu, Vue Flow is purpose-built for Vue 3’s Composition API, leveraging Vue’s reactivity system for responsive node updates and seamless state management. The library has gained significant traction in the Vue ecosystem, with developers using it to build everything from AI workflow editors to low-code platforms to network topology visualizers.
What sets Vue Flow apart is its combination of out-of-the-box functionality and deep customizability. You get zoom, pan, minimap, selection, drag-and-drop, and keyboard shortcuts without writing a single line of interaction code. But every visual element – from node rendering to edge styling to the controls component – can be replaced with your own custom Vue components.
How Does Vue Flow’s Architecture Work?
Vue Flow is built around a layered architecture that separates graph state management, rendering, and interaction handling.
graph TD
A[Vue Flow Component] --> B[Graph State Management]
A --> C[Viewport Controller]
A --> D[Interaction Layer]
B --> E[Nodes Store]
B --> F[Edges Store]
C --> G[Zoom & Pan]
C --> H[Minimap]
D --> I[Selection]
D --> J[Drag & Drop]
D --> K[Keyboard]
E --> L[Node Renderer]
F --> M[Edge Renderer]
L --> N[Custom Vue Components]
M --> N
The state management layer maintains reactive stores for nodes and edges, the viewport controller handles camera transforms, and the interaction layer translates user input into state changes. This separation ensures that custom components only need to worry about rendering, not interaction logic.
What Node and Edge Types Does Vue Flow Support?
Vue Flow ships with a set of built-in node and edge types while making it trivial to create custom ones.
| Type | Category | Options | Customization |
|---|---|---|---|
| Default node | Built-in | Label, icon, handles | Style props, CSS variables |
| Input node | Built-in | Single target handle | Style, size, colors |
| Output node | Built-in | Single source handle | Style, size, colors |
| Custom node | User-defined | Any Vue 3 component | Full control over rendering |
| Bezier edge | Built-in | Animated, label, marker | Path, color, width |
| Step edge | Built-in | Right-angle paths | Style, animated |
| Smoothstep | Built-in | Rounded right-angle paths | Style, animated |
| Straight edge | Built-in | Direct line | Style, animated |
Custom nodes are standard Vue 3 components that receive the node data as props and can contain any HTML, child components, or interactive elements. Custom edges follow the same pattern, with access to source and target node positions.
What Interaction Events Does Vue Flow Expose?
The library provides a comprehensive event system covering every user interaction and state change.
| Event | Triggered When | Payload |
|---|---|---|
nodeClick | User clicks a node | Node ID, event, position |
nodeDrag | User drags a node | Node ID, position delta |
edgeClick | User clicks an edge | Edge ID, event |
connect | User creates an edge | Source node, target node |
selectionChange | Selected nodes/edges change | Array of selected IDs |
viewportChange | Zoom or pan changes | Zoom level, center position |
nodeDoubleClick | User double-clicks a node | Node ID, event |
nodesChange | Any node change | Change type and data |
edgesChange | Any edge change | Change type and data |
Events follow Vue 3’s emit pattern and can be handled with standard @event syntax in templates. The event payloads are typed in TypeScript, making integration with type-safe codebases straightforward.
How Do You Create Custom Nodes in Vue Flow?
Creating custom nodes is the most common extension point in Vue Flow applications, and the library makes it remarkably straightforward.
| Customization Aspect | Vue Flow Approach | Example |
|---|---|---|
| Node rendering | Custom Vue 3 component | <template> with any HTML |
| Node data | Typed props interface | defineProps<NodeProps>() |
| Node handles | <Handle /> component | Position, type, style |
| Node connections | Configurable handle types | Source/target, multiple handles |
| Node resize | Resize directive | Drag to resize node |
| Node context menu | Custom implementation | Right-click component |
| Node grouping | Nested node support | Parent-child nodes |
| Node validation | Before-connect callback | Reject invalid connections |
A custom node is essentially a standard Vue 3 component that receives node-specific props and can use the Handle component to define connection points. This familiar pattern means any Vue developer can create sophisticated custom nodes without learning a new paradigm.
FAQ
What is Vue Flow? Vue Flow is a highly customizable flowchart component library for Vue 3, inspired by React Flow. It provides zoom, pan, minimap, custom nodes and edges, and full TypeScript support for building interactive node-based applications.
How does Vue Flow compare to React Flow? Vue Flow was inspired by React Flow but is a complete reimplementation for Vue 3’s Composition API. It offers similar functionality – custom nodes, edges, minimap, controls – with performance optimized for Vue’s reactivity system.
What types of nodes and edges does Vue Flow support? Vue Flow supports built-in node types including input, output, and default nodes. Custom nodes can be created as Vue 3 components. Edge types include bezier, step, smoothstep, and straight, all supporting custom styles and markers.
Does Vue Flow support touch devices and mobile? Yes, Vue Flow includes touch event handling for mobile devices. Users can drag nodes, pan the viewport, and zoom using touch gestures on tablets and phones.
What kind of applications can be built with Vue Flow? Vue Flow is used for visual programming editors, workflow automation tools, chatbot builders, data pipeline designers, mind mapping applications, network topology editors, and any application requiring interactive node-based interfaces.
Further Reading
- Vue Flow GitHub Repository – Source code, examples, and community issues
- Vue Flow Documentation – Official docs with guides and API reference
- React Flow – The inspiration for Vue Flow (React version)
- Vue 3 Composition API Documentation – The Vue 3 API Vue Flow is built on
- TypeScript Documentation – TypeScript language reference for type-safe Vue Flow usage
