Vue Flow: a Vue 3 flowchart component built on the React Flow model

What Vue Flow solves, and who it is for

Vue Flow gives a Vue 3 application a canvas of nodes and edges that the user can pan, zoom, drag, select and connect. The README frames the whole model around one abstraction: nodes and edges are both called elements, every element needs a unique id, nodes additionally need an XY position, and edges need a source and a target that reference node ids. That is the entire data contract. If your product needs to show a pipeline, an org chart, a dependency graph or a visual builder, and you want the node bodies to be your own Vue components rather than fixed shapes from a vendor, this is the target use case.

The library is written in TypeScript, which matters when you are mapping your own domain objects onto nodes and edges: the element shapes are typed, so a malformed edge shows up at compile time rather than as a blank canvas. The README's feature list also claims that it tracks changes reactively and only re-renders the appropriate elements, which is the claim you would want to check against your own graph size rather than take on faith.

Who it is not for: anyone on Vue 2. The README states plainly that the library does not work with Vue 2, that it uses features exclusive to Vue 3, and that there is no support and will not be any in the future. That is not a soft deprecation notice, it is a closed door.

How nodes, edges and the reactive store fit together

The architecture visible in the repository is a pnpm and Turborepo monorepo. The root package.json is private and named @vue-flow/monorepo, with turbo.json driving build, test and lint across the packages/ directory. The core component is not a single file you drop in; it is one package among several, and the additional components named in the README (Background, Minimap, Controls) live as separate entries under packages/. That layout tells you the intended consumption pattern: install the core, then install only the extras you actually render.

At runtime the flow is v-model driven. You own refs for nodes and edges, pass them into the VueFlow component with v-model:nodes and v-model:edges, and the component writes back into those refs as the user drags, connects or deletes. Because the state lives in your component, you can serialize it, persist it, or feed it from a server without asking the library for permission. The README also mentions graph helper and state composable functions for advanced uses, so logic that needs to read or mutate the graph from outside the canvas has a supported entry point rather than requiring you to reach into internals.

Zoom and pan come from D3, which the README credits alongside React Flow and VueUse. The README is also upfront that Vue Flow is heavily based on React Flow from webkid, and thanks that project directly. So the mental model is not original to Vue Flow: if you have used React Flow, the element shapes, the id requirements and the source/target edge model will feel familiar, and the differences are in the Vue bindings rather than in the graph concepts.

Installing @vue-flow/core and rendering a first graph

The README gives three package manager variants for the core package. Pick the one your project already uses; the package name is identical in all three.

npm i @vue-flow/core

After installing, the README's Quickstart defines four nodes and two edges. Note the shape: each node has an id, an optional type, a label and a position, and each edge has an id plus source and target that must match node ids.

<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>

The template then binds both refs to the component, and the README's example does nothing else:

<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges"></VueFlow>
</template>

The part that trips people up is styling. The README warns that you must import the styles, and that you must not scope them with scoped in your component, because scoped CSS would not reach the internal elements the library renders.

/* import the required styles */
@import "@vue-flow/core/dist/style.css";

/* import the default theme (optional) */
@import "@vue-flow/core/dist/theme-default.css";

If you follow the Quickstart and see nothing on the page, the missing CSS import is the first thing to check, not your node data.

Where Vue Flow is the wrong choice

The hardest boundary is Vue 2. The README devotes a subsection to it and answers with a flat no: the library relies on Vue 3 features, there is no Vue 2 support, and there will not be any. If you are maintaining a Vue 2 codebase and cannot migrate, this project is not a candidate, and no amount of wrapper code changes that.

The second limitation is the README's own silence. It documents setup, a Quickstart, the element model, the additional components by name, and a development workflow, but it does not document rollback, undo/redo, persistence, or server-side rendering behaviour. If your feature list includes an undo stack or a saved-and-restored canvas, the README does not tell you how Vue Flow supports it, so you are reading the state composables and the graph helpers to find out. Treat that as unknown, not as provided.

The third is scope creep in the opposite direction. Vue Flow is a rendering and interaction layer for a graph you own. It is not a diagram editor product. There is no mention of collaborative editing, access control, or a hosted backend. Teams that want a ready-made editor with those parts included are looking at the wrong layer of the stack, and the repository layout, a component library plus examples, confirms that.

One more practical constraint comes from the development section: the repo expects Node.js v20+ and pnpm v9+ to build the packages. That applies to contributing or building from source, not to consuming the published package, but if you plan to fork and patch, that is your toolchain floor.

Vue Flow against React Flow, and against building it yourself

The most direct alternative is React Flow, and Vue Flow's own README makes the comparison for you: Vue Flow is heavily based on React Flow, and the author thanks that project explicitly. The difference is the framework, not the graph model. React Flow is a React component, so its state lives in React hooks and its custom nodes are React components; Vue Flow exposes the same node-and-edge concept through Vue's reactivity and v-model bindings, and its custom nodes are Vue single-file components. If your team is already a React shop, there is no reason to cross over. If your application is Vue 3, React Flow would mean either a second framework in the bundle or an iframe, and neither is attractive.

The second alternative is drawing the graph yourself with D3 directly. The README credits D3 for making all zoom and pan actions possible, which is honest about where the hard part lives. Going straight to D3 gives you total control over layout and rendering, and it also means you implement hit testing, selection, edge routing, drag behaviour and the minimap. Vue Flow is essentially the layer that packages those concerns behind a component and a typed element model. Choose raw D3 when your visualisation is not really a node-link diagram, for example a dense chart or a custom canvas scene. Choose Vue Flow when the thing on screen is genuinely nodes connected by edges and you want to spend your time on what the nodes contain.

Licence, maintenance and what an upgrade costs

Vue Flow is MIT licensed, and the LICENSE file sits at the repository root. For a component library that you embed in a product, MIT is permissive: you can ship it in a closed-source application provided you keep the copyright and permission notice. The README's special thanks section points at React Flow's sponsorship and Pro options, but that is a request aimed at the upstream project, not a licensing condition attached to Vue Flow itself. Nothing in the README suggests a commercial tier or a paid edition of Vue Flow.

On maintenance, the facts are concrete. The repository is not archived, and the last push was on 2026-07-14. The most recent release listed is v1.48.2 from 2026-01-28, alongside @vue-flow/[email protected] on the same day, and v1.48.1 before it in December 2025. So the core package and at least one add-on package are versioned and published separately, which is the practical upgrade cost: you do not bump one version, you track the core package and each add-on you installed.

The release tooling supports that reading. The root package.json defines ci:version as changeset version and ci:publish as lint, build, test, then changeset publish, and there is a .changeset/ directory plus a cliff.toml for changelog generation. Version numbers are managed deliberately, and the CHANGELOG.md at the root is the file to read before upgrading rather than diffs. The packages are also versioned independently, as the node-resizer release shows, so a core upgrade does not automatically move the extras.

Editorial conclusion

Adopt Vue Flow if you are on Vue 3 and want a node-and-edge canvas whose rendering you control through your own components; the packages are MIT licensed and the last push was on 2026-07-14. Do not adopt it on Vue 2, since the README states the library does not work there and no support is planned. Before committing, verify the Minimap and Background entries under packages/ against what you need, and confirm the CSS import paths in your bundler.

Frequently asked questions

Official sources

1. bcakmakoglu/vue-flow on GitHub
2. License: MIT
3. Project website
4. README
5. Releases