Vue Flow Documentation

Vue Flow is a library for creating interactive flowcharts and graphs in Vue.js. It provides a foundation for building dynamic diagrams, editors, and graphic representations.

Key capabilities include:

• Built-in Interactivity: Supports element dragging, zooming, panning, and selection out of the box.
• Extensibility: Allows for the creation of custom nodes, edges, and connection lines.
• Reactive Performance: Uses Vue's reactivity system to ensure efficient re-renders of only necessary elements.
• Composability: Provides built-in graph helpers and state composable functions for managing complex graph logic.
• TypeScript Support: Fully written in TypeScript for improved developer reliability and type safety.

Before using Vue Flow, ensure your environment meets the following requirements:

• Node.js: v20 or above
• Vue: 3.3 or above

You can react to flow changes by listening to events directly on the <VueFlow> component using Vue's @ directive. Common events include @node-click and @edge-click.

<script setup>
import { ref } from 'vue';  
import { VueFlow } from '@vue-flow/core';

const nodes = ref([/* ... */]);
const edges = ref([/* ... */]);

// Node click event handler
function onNodeClick({ event, node }) {
  console.log('Node clicked:', node, event);
}

// Edge click event handler
function onEdgeClick({ event, edge }) {
  console.log('Edge clicked:', edge, event);
}
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" @node-click="onNodeClick" @edge-click="onEdgeClick"></VueFlow>
</template>

To ensure Vue Flow displays correctly, you must import the core styles. You can also optionally import the default theme.

/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';

You can define custom edge types by using template slots within the VueFlow component. When an edge has a type property (e.g., type: 'custom'), Vue Flow looks for a slot named #edge-[type] (e.g., #edge-custom). You can pass the edge properties to your custom component using v-bind="props".

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'

const nodes = ref([
  { id: '1', position: { x: 50, y: 50 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 50, y: 250 }, data: { label: 'Node 2' } },
])

const edges = ref([
  { id: 'e1->2', type: 'custom', source: '1', target: '2' },
])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <template #edge-custom="props">
      <CustomEdge v-bind="props" />
    </template>
  </VueFlow>
</template>

Viewport functions can be accessed in two ways:

1. Using the useVueFlow composable: Best for <script setup> environments.
2. Using the onPaneReady event: The VueFlowStore instance is provided as an argument to the onPaneReady event handler.

This instance allows you to manipulate the viewport (zoom, pan) and access flow elements.

<script setup>
import { VueFlow, useVueFlow } from '@vue-flow/core'

const { onPaneReady } = useVueFlow()

// event handler
onPaneReady((instance) => instance.fitView())
</script>

To use the background component in your Vue Flow canvas, install the @vue-flow/background package using yarn or npm.

# install
$ yarn add @vue-flow/background

# or
$ npm i --save @vue-flow/background

Alternatively, you can define custom edge types by passing an edgeTypes object to the VueFlow component.

Important: Use Vue's markRaw function when defining the edgeTypes object to prevent Vue from converting your components into reactive objects, which avoids console warnings.

<script setup>
import { ref, markRaw } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue'

const edgeTypes = {
  custom: markRaw(CustomEdge),
}

const nodes = ref([
  { id: '1', position: { x: 50, y: 50 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 50, y: 250 }, data: { label: 'Node 2' } },
])

const edges = ref([
  { id: 'e1->2', type: 'custom', source: '1', target: '2' },
])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" :edgeTypes="edgeTypes" />
</template>

To avoid prop drilling when using external components (like a Sidebar) that need to interact with the flow, initialize a Vue Flow store instance in a parent component before the external component is initialized. This makes the instance available via injection throughout the component tree.

Note: If you have multiple store instances in the same context, you must provide a unique id to each to ensure you access the correct instance. Otherwise, useVueFlow will inject the first instance it finds (usually the last one injected).

<!-- Container.vue -->
<script>
import { useVueFlow  } from '@vue-flow/core'

// initialize a store instance in this context, so it is available when calling inject(VueFlow)
useVueFlow()
</script>