2026-08-06
Vue Flow 2.0
Vue Flow 2.0 is here 🎉
Vue Flow 2.0 rebuilds the core on top of
@xyflow/system, the framework-agnostic engine that also
powers React Flow and Svelte Flow. You get the same node and edge model, the same accessor
names, and the same store shape across all three libraries, in a smaller and faster package.
It ships under a new name, @xyflow/vue, and it brings breaking changes. The
migration guide walks through every one with
before/after examples.
Highlights
- One package.
@xyflow/vuebundles every built-in (Background,Controls,MiniMap,NodeToolbar,NodeResizer), so the separate@vue-flow/*add-ons are gone. v-modelbindings. Bind state withv-model:nodesandv-model:edgesfor a managed flow, or pass one-way:nodes/:edgeswith@nodes-change/@edges-changewhen you want to handle every change yourself.- Immutable nodes and edges. Vue Flow no longer mutates your arrays in place. Update
through the instance actions (
updateNode,updateNodeData) or replace the array. NodevsInternalNode. Your nodes stay the plain objects you passed in. Library-computed fields like the absolute position and measured size live onInternalNode, reachable withgetInternalNode(id)oruseInternalNode(id).- A split store.
useVueFlow()returns a curated instance (actions, getters, hooks), whileuseVueFlowStore()withstoreToRefsexposes the raw reactive state. - Provider model. There’s no global registry anymore. A flow’s store is scoped to its
<VueFlow>, or provided explicitly withsetupVueFlow()(or a<VueFlowProvider>), so multiple flows on a page stay isolated. - xyflow-parity API.
findNodebecomesgetNode,projectbecomesscreenToFlowPosition, the edge-update vocabulary becomesreconnect*, and more. The cheat sheet lists them all. - New styling. The CSS variables move to the shared
--xy-*namespace, and@xyflow/vue/style.cssis the full theme (importbase.cssfor the minimum instead).
Requirements
Vue Flow 2.0 needs Vue >=3.5 (it uses useId()) and @vueuse/core v14.
Upgrading
Read the migration guide for the full walkthrough, or jump to the cheat sheet if you just want the lookup tables. The source and releases live on GitHub .
Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with Vue Flow Pro
Last updated on