Skip to main content
This example demonstrates the basic setup of Vue Flow with interactive nodes and edges. It includes the Background, Controls, and MiniMap components.

​
Live Demo

View the live demo on vueflow.dev.

​
Complete Example

<script lang="ts" setup>
import type { Edge, Node } from '@vue-flow/core'
import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'

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

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

const { onConnect, addEdges, setViewport, toObject } = useVueFlow({
  minZoom: 0.2,
  maxZoom: 4,
})

onConnect(addEdges)

function updatePos() {
  return nodes.value.forEach((el) => {
    if (isNode(el)) {
      el.position = {
        x: Math.random() * 400,
        y: Math.random() * 400,
      }
    }
  })
}

function logToObject() {
  return console.log(toObject())
}

function resetViewport() {
  return setViewport({ x: 0, y: 0, zoom: 1 })
}

function toggleclass() {
  return nodes.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
}
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" class="vue-flow-basic-example" fit-view-on-init>
    <Background />
    <MiniMap />
    <Controls />
    <Panel position="top-right" style="display: flex; gap: 5px">
      <button @click="resetViewport">reset viewport</button>
      <button @click="updatePos">change pos</button>
      <button @click="toggleclass">toggle class</button>
      <button @click="logToObject">toObject</button>
    </Panel>
  </VueFlow>
</template>

​
Key Features

​
Nodes and Edges

Define your flow structure with nodes and edges: 
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 } },
])

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

​
useVueFlow Composable

Access Vue Flow’s API and configuration: 
const { onConnect, addEdges, setViewport, toObject } = useVueFlow({
  minZoom: 0.2,
  maxZoom: 4,
})

​
Handle Connections

Automatically create edges when nodes are connected: 
onConnect(addEdges)

​
Additional Components

Adds a background pattern to the flow:
<Background />
See Background component for customization options.

​
Utility Functions

​
Update Node Positions

function updatePos() {
  nodes.value.forEach((el) => {
    if (isNode(el)) {
      el.position = {
        x: Math.random() * 400,
        y: Math.random() * 400,
      }
    }
  })
}

​
Reset Viewport

function resetViewport() {
  setViewport({ x: 0, y: 0, zoom: 1 })
}

​
Export Flow State

function logToObject() {
  console.log(toObject())
}
The toObject() method returns the complete flow state including nodes, edges, and viewport.

​
Configuration Options

The fit-view-on-init prop automatically adjusts the viewport to fit all nodes when the flow is initialized.
<VueFlow 
  :nodes="nodes" 
  :edges="edges" 
  fit-view-on-init
  :min-zoom="0.2"
  :max-zoom="4"
>
  <!-- ... -->
</VueFlow>

​
Next Steps

Custom Nodes

Learn how to create custom node components

Custom Edges

Build custom edge components

API Reference

Explore all available props and events

Composables

Discover powerful composable functions

Build docs developers (and LLMs) love

Get started for freeTalk to us