Skip to main content

​
Quick Start

This guide will help you create your first interactive flowchart with Vue Flow. You’ll learn the basic concepts and see a complete working example.

​
Core Concepts

Vue Flow applications are built with two main element types:
  • Nodes: Visual elements positioned on the canvas with x/y coordinates
  • Edges: Connections between nodes that show relationships
Every node and edge must have a unique id. Nodes require a position object with x and y coordinates, while edges need source and target properties that reference node IDs.

​
Basic Example

Here’s a complete working example to get you started:
1
Create the Component
2
Create a new Vue component with nodes and edges:
3
Flowchart.vue (JavaScript)
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

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

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

<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges" />
</template>
Flowchart.vue (TypeScript)
<script setup lang="ts">
import { ref } from 'vue'
import type { Node, Edge } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'

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

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

<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges" />
</template>
4
Import Required Styles
5
Add the Vue Flow styles to your component or main application file:
6
/* Required styles for Vue Flow */
@import '@vue-flow/core/dist/style.css';

/* Default theme (optional but recommended) */
@import '@vue-flow/core/dist/theme-default.css';
7
Do not scope these styles with scoped in your component. They need to be available globally.
8
Set Container Height
9
Make sure your VueFlow component has a defined height:
10
<template>
  <div style="height: 600px">
    <VueFlow v-model:nodes="nodes" v-model:edges="edges" />
  </div>
</template>

​
Enhanced Example with Additional Features

Let’s build a more feature-rich example with Background, Controls, and MiniMap:
Make sure you have installed the optional packages: @vue-flow/background, @vue-flow/controls, and @vue-flow/minimap
<script setup>
import { ref } from 'vue'
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'

const { onInit, onConnect, addEdges } = useVueFlow()

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

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

// Fit the view when the flow is initialized
onInit((vueFlowInstance) => {
  vueFlowInstance.fitView()
})

// Handle new connections
onConnect((connection) => {
  addEdges(connection)
})
</script>

<template>
  <VueFlow
    v-model:nodes="nodes"
    v-model:edges="edges"
    class="vue-flow-container"
  >
    <Background pattern-color="#aaa" :gap="16" />
    <MiniMap />
    <Controls />
  </VueFlow>
</template>

<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';

.vue-flow-container {
  height: 600px;
}
</style>

​
Understanding Node Types

Vue Flow provides three built-in node types:
  • input: A node with a handle on the bottom (source)
  • default: A node with handles on top (target) and bottom (source)
  • output: A node with a handle on top (target)
You can create custom node types by using Vue component slots. We’ll cover this in the Custom Nodes guide.

​
Understanding Edges

Edges connect nodes and can be customized with various properties: 
const edges = ref([
  {
    id: 'e1-2',
    source: '1',      // Source node ID
    target: '2',      // Target node ID
    animated: true,   // Animated dashed line
    label: 'Edge',    // Edge label text
    type: 'smoothstep' // Edge type: 'default', 'straight', 'step', 'smoothstep'
  },
])

​
Using the useVueFlow Composable

The useVueFlow composable provides powerful methods and event hooks: 
import { useVueFlow } from '@vue-flow/core'

const {
  // Methods
  fitView,           // Fit all nodes in the viewport
  addNodes,          // Add new nodes
  addEdges,          // Add new edges
  setViewport,       // Set viewport position and zoom
  toObject,          // Export graph data
  
  // Event hooks
  onInit,            // Called when flow is initialized
  onConnect,         // Called when nodes are connected
  onNodeDragStop,    // Called when node drag ends
  onNodeClick,       // Called when node is clicked
  
  // State
  nodes,             // Reactive nodes array
  edges,             // Reactive edges array
  viewport,          // Current viewport state
} = useVueFlow()

​
Interactive Features

Your flow now has these built-in features:
  • Pan: Click and drag the canvas background
  • Zoom: Use mouse wheel or trackpad to zoom in/out
  • Drag Nodes: Click and drag nodes to reposition them
  • Select: Click nodes or edges to select them
  • Multi-select: Hold Shift and click to select multiple elements
  • Box Selection: Hold Shift and drag to select multiple elements
  • Connect Nodes: Drag from a node handle to another node to create a connection
Use the Controls component to add zoom buttons and fit-view functionality to your flow.

​
Common Patterns

​
Adding Nodes Dynamically

import { useVueFlow } from '@vue-flow/core'

const { addNodes } = useVueFlow()

function addNewNode() {
  const newNode = {
    id: `node-${Date.now()}`,
    position: { x: Math.random() * 400, y: Math.random() * 400 },
    data: { label: 'New Node' },
  }
  addNodes([newNode])
}

​
Handling Connections

import { useVueFlow } from '@vue-flow/core'

const { onConnect, addEdges } = useVueFlow()

onConnect((connection) => {
  // Add custom properties to the connection
  addEdges({
    ...connection,
    animated: true,
    type: 'smoothstep',
  })
})

​
Responding to Node Events

import { useVueFlow } from '@vue-flow/core'

const { onNodeClick, onNodeDragStop } = useVueFlow()

onNodeClick(({ node }) => {
  console.log('Clicked node:', node.id)
})

onNodeDragStop(({ node }) => {
  console.log('Node drag ended at position:', node.position)
})

​
Next Steps

Now that you have a working flow, explore more advanced features:

Custom Nodes

Create custom node components with your own UI and logic

Custom Edges

Design custom edge styles and add interactive elements

State Management

Learn how to manage and persist your graph state

Examples

Browse example implementations for common use cases

Build docs developers (and LLMs) love

Get started for freeTalk to us