Uncontrolled Flow

Vue Flow runs in two modes. In a controlled flow you own the nodes and edges state and apply every change yourself. In an uncontrolled (managed) flow Vue Flow keeps the state and you read or change it through the instance. Adding Interactivity covers the controlled path and the v-model managed path in detail; this guide focuses on running a flow with no binding at all.

Seeding and driving through the instance

Pass the initial nodes and edges to setupVueFlow(), render <VueFlow> with no nodes / edges binding, and change the graph through the returned instance — here with addNodes:

<script setup lang="ts">
import { setupVueFlow, VueFlow } from '@xyflow/vue';
 
const { addNodes } = setupVueFlow({
  nodes: [
    { id: 'a', type: 'input', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
    { id: 'b', position: { x: 40, y: 120 }, data: { label: 'Node B' } },
  ],
  edges: [{ id: 'a-b', source: 'a', target: 'b' }],
  defaultEdgeOptions: { animated: true },
});
 
let count = 0;
function addNode() {
  count += 1;
  addNodes({ id: `new-${count}`, position: { x: 40 * count, y: 40 * count }, data: { label: `Node ${count}` } });
}
</script>
 
<template>
  <VueFlow fit-view>
    <button type="button" @click="addNode">add node</button>
  </VueFlow>
</template>

Because you don’t hold the nodes and edges in local state, you change them through instance actions like addNodes, updateNode, and removeNodes rather than reassigning an array.

Connecting nodes

Vue Flow has no auto-connect, so new connections always come through the @connect event. In an uncontrolled flow, add the edge through the instance’s addEdges instead of reassigning a local array:

const { addEdges } = setupVueFlow(/* ... */);
 
function onConnect(connection: Connection) {
  addEdges([connection]);
}

defaultEdgeOptions is handy here: since you’re not building each edge by hand, it’s how you give programmatically added edges a consistent look, such as making them animated.