Skip to Content

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/vue bundles every built-in (Background, Controls, MiniMap, NodeToolbar, NodeResizer), so the separate @vue-flow/* add-ons are gone.
  • v-model bindings. Bind state with v-model:nodes and v-model:edges for a managed flow, or pass one-way :nodes/:edges with @nodes-change/@edges-change when 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.
  • Node vs InternalNode. Your nodes stay the plain objects you passed in. Library-computed fields like the absolute position and measured size live on InternalNode, reachable with getInternalNode(id) or useInternalNode(id).
  • A split store. useVueFlow() returns a curated instance (actions, getters, hooks), while useVueFlowStore() with storeToRefs exposes the raw reactive state.
  • Provider model. There’s no global registry anymore. A flow’s store is scoped to its <VueFlow>, or provided explicitly with setupVueFlow() (or a <VueFlowProvider>), so multiple flows on a page stay isolated.
  • xyflow-parity API. findNode becomes getNode, project becomes screenToFlowPosition, the edge-update vocabulary becomes reconnect*, and more. The cheat sheet lists them all.
  • New styling. The CSS variables move to the shared --xy-* namespace, and @xyflow/vue/style.css is the full theme (import base.css for 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