Skip to Content
LearnCore ConceptsBuilding a Flow

Building a Flow

We’ve already seen in the previous guide some of the core concepts of Vue Flow: A flow consists of nodes and edges placed inside a pannable and zoomable viewport. If you haven’t already, we recommend having a look at the core concepts overview first.

To follow along with this guide you will need to have a Vue project set up and install the @xyflow/vue package:

npm install @xyflow/vue

Creating the flow

Let’s start by creating an empty flow with <Controls /> for the viewport and a dotted <Background />.

Add imports

All the imports we need are importable from @xyflow/vue, so let’s import the main <VueFlow /> component and the background and controls components mentioned above.

<script setup lang="ts">
import { Background, Controls, VueFlow } from '@xyflow/vue';
</script>

It’s also important to import the default styles for Vue Flow. You can’t skip this step because the styles are required for the flow to render and function correctly.

<style>
@import '@xyflow/vue/style.css';
</style>

Render VueFlow

Next, render the main component inside an element with defined dimensions and place the <Background /> and <Controls /> components inside <VueFlow />

Content inside <VueFlow> is fixed on top of the viewport. The <Background /> component transforms its pattern to match viewport movement.

<script setup lang="ts">
...
</script>
 
<template>
  <div style="width: 100vw; height: 100vh;">
    <VueFlow>
      <Background />
      <Controls />
    </VueFlow>
  </div>
</template>
 
<style>
...
</style>

Empty flow

That’s it! You have created your first empty flow 🎉

If everything is set up correctly, you should see a blank canvas like this:

Adding nodes

Now that the flow is set up, let’s add some nodes. Each node represents an element placed on the canvas with a specific position and content.

Create node objects

In the <script> tag, create an array of node objects with these required properties:

  • id to uniquely identify each node in the flow
  • position containing both the x and y coordinates of the node
  • data for any arbitrary data to pass to the node. This should always be an object, even if it is empty.

To define the nodes array we’ll want to use a shallow ref to make the array reactive.

Using ref would make every property of each node deeply reactive, not just the array itself. For large flows that can hurt performance, so we recommend a shallowRef and replacing the whole array when you update it (for example with Array.prototype.map).

const nodes = shallowRef([
  {
    id: 'n1',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    type: 'input',
  },
  {
    id: 'n2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
    type: 'output',
  },
]);

Add nodes to the flow

Next, we set up a two-way binding  of the nodes on the VueFlow component. This lets Vue Flow handle common changes like updating node positions on drag automatically.

<VueFlow v-model:nodes="nodes">

fitView

We can use the fitView prop to have the viewport automatically zoom and position itself to our initial nodes.

<VueFlow v-model:nodes="nodes" fit-view>

Flow with nodes

This gives us a flow with two labeled nodes 🎉

We have several built-in nodes that you can explore in the node reference. However, once you start building your own application, you will want to use custom nodes.

Adding edges

Now that we have two nodes, let’s connect them with an edge.

Create edge objects

To create an edge, we define an array of edge objects.

Each edge object needs to have an id, a source (where the edge begins), and a target (where it ends). In this example, we use the id values of the two nodes we created so far (n1 and n2) to define the edge:

Just like our nodes, we use a shallowRef to make the edges array reactive.

const edges = shallowRef([{ id: 'n1-n2', source: 'n1', target: 'n2' }]);

Add edges to the flow

And again, as with nodes, we add the edges to the VueFlow component using v-model.

<VueFlow v-model:nodes="nodes" v-model:edges="edges" fit-view>

Your flow should now look like this:

Edge label and type

By default, Vue Flow allows you to add text labels to edges that will float in the middle of the edge via the label property. Vue Flow also comes with a handful of built-in edge types which can draw the connection line between two nodes in different ways.

Let’s add a label to the edge and change its type to "smoothstep": an orthogonal-style edge with rounded 90 degree angles.

const edges = shallowRef([
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
    type: 'smoothstep',
    label: 'connects with',
  },
]);

Done! 🎉

Congratulations! You have completed a basic flow with nodes and edges! 🎉

Full code example 🏁

You took your first steps in Vue Flow! The completed flow will look like this:

Last updated on
OverviewAdding Interactivity