Quick Start

This page will take you from zero to a working Vue Flow app in a few minutes. You’ll learn how to install Vue Flow, configure it, and create your first flow. From there you can check out the examples,or dive into the API docs. If you want to get up and running as soon as possible, you’re in the right place!

Installation

To install Vue Flow in an existing Vue project, run the following command:

npm install @xyflow/vue

pnpm add @xyflow/vue

yarn add @xyflow/vue

bun add @xyflow/vue

Usage

The @xyflow/vue package exports the <VueFlow /> component, which is the entrypoint for your flow. Importing the default styles and defining a handful of nodes and edges are all we need to get started!

There are a few things to pay attention to here:

• 🎨 You must import the Vue Flow stylesheet.

• 🔎 Each node must have a unique id.

• ⚡ Using shallowRef is preferable for nodes and edges to avoid costly deep reactivity.

• 📐 The <VueFlow /> component inherits the size of its parent. Make sure to wrap it in an element with explicit dimensions.

<script setup lang="ts">
import type { Edge, Node } from '@xyflow/vue';
import { shallowRef } from 'vue';
import { Background, Controls, MiniMap, VueFlow } from '@xyflow/vue';
 
const nodes = shallowRef<Node[]>([
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } },
  { id: '2', position: { x: 300, y: 0 }, data: { label: 'World' } },
]);
 
const edges = shallowRef<Edge[]>([{ id: '1->2', source: '1', target: '2', type: 'smoothstep' }]);
</script>
 
<template>
  <div style="width: 100vw; height: 100vh;">
    <VueFlow :nodes="nodes" :edges="edges">
      <Controls />
      <MiniMap />
      <Background variant="dots" :gap="12" :size="1" />
    </VueFlow>
  </div>
</template>
 
<style>
@import '@xyflow/vue/style.css';
</style>

Result

Et voila. You’ve already created your first interactive flow! 🎉

Next steps

Where to head next depends on what you need to know and how you like to learn. Check out the core concepts to better understand how Vue Flow works and the common terminology we use throughout our docs. If you’re interested in how to render your own custom nodes in a flow, then the customization docs are for you.

If you just want to see some code, head over to our examples to see how to implement different features and functionality.