Getting Started ​
This guide covers the basics of setting up and using Vue Flow. You'll learn how to install Vue Flow, configure it, and create your first flowchart.
NOTE
If you're looking for a guide on how to setup a Vue project, check out the official Vue documentation.
Prerequisites ​
Before you strap in, make sure you're equipped with:
CodeSandbox ​
If you're looking for a quick way to get started, check out the CodeSandbox template.
Installation ​
Use your preferred package manager to install Vue Flow:
sh
$ npm add @vue-flow/coresh
$ pnpm add @vue-flow/coresh
$ yarn add @vue-flow/coreQuick Start ​
In Vue Flow, a graph consists of nodes and edges.
Each node or edge requires a unique id.
Nodes also need a XY-position, while edges require a source and a target node id.
NOTE!
To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
css
/* 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';Refer to the Theming section for additional information.
Here's a simple example to get you started:
vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue'
// these are our nodes
const nodes = ref([
// an input node, specified by using `type: 'input'`
{
id: '1',
type: 'input',
position: { x: 250, y: 5 },
// all nodes can have a data object containing any data you want to pass to the node
// a label can property can be used for default nodes
data: { label: 'Node 1' },
},
// default node, you can omit `type: 'default'` as it's the fallback type
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
// An output node, specified by using `type: 'output'`
{
id: '3',
type: 'output',
position: { x: 400, y: 200 },
data: { label: 'Node 3' },
},
// this is a custom node
// we set it by using a custom type name we choose, in this example `special`
// the name can be freely chosen, there are no restrictions as long as it's a string
{
id: '4',
type: 'special', // <-- this is the custom node type name
position: { x: 400, y: 200 },
data: {
label: 'Node 4',
hello: 'world',
},
},
])
// these are our edges
const edges = ref([
// default bezier edge
// consists of an edge id, source node id and target node id
{
id: 'e1->2',
source: '1',
target: '2',
},
// set `animated: true` to create an animated edge path
{
id: 'e2->3',
source: '2',
target: '3',
animated: true,
},
// a custom edge, specified by using a custom type name
// we choose `type: 'special'` for this example
{
id: 'e3->4',
type: 'special',
source: '3',
target: '4',
// all edges can have a data object containing any data you want to pass to the edge
data: {
hello: 'world',
}
},
])
</script>
<template>
<VueFlow :nodes="nodes" :edges="edges">
<!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
<template #node-special="specialNodeProps">
<SpecialNode v-bind="specialNodeProps" />
</template>
<!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
<template #edge-special="specialEdgeProps">
<SpecialEdge v-bind="specialEdgeProps" />
</template>
</VueFlow>
</template>
<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';
/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>vue
<script setup>
import { computed } from 'vue'
import { Position, Handle } from '@vue-flow/core'
const props = defineProps({
position: {
type: Object,
required: true,
}
})
const x = computed(() => `${Math.round(props.position.x)}px`)
const y = computed(() => `${Math.round(props.position.y)}px`)
</script>
<template>
<div class="vue-flow__node-default">
<div>{{ data.label }}</div>
<div>
{x} {y}
</div>
<Handle type="source" :position="Position.Bottom" />
</div>
</template>vue
<script setup>
import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@vue-flow/core'
import { computed } from 'vue'
const props = defineProps({
sourceX: {
type: Number,
required: true,
},
sourceY: {
type: Number,
required: true,
},
targetX: {
type: Number,
required: true,
},
targetY: {
type: Number,
required: true,
},
sourcePosition: {
type: String,
required: true,
},
targetPosition: {
type: String,
required: true,
},
data: {
type: Object,
required: true,
}
})
const path = computed(() => getBezierPath(props))
</script>
<script>
export default {
inheritAttrs: false,
}
</script>
<template>
<!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
<BaseEdge :path="path[0]" />
<!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
<EdgeLabelRenderer>
<div
:style="{
pointerEvents: 'all',
position: 'absolute',
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
}"
class="nodrag nopan"
>
{{ data.hello }}
</div>
</EdgeLabelRenderer>
</template>vue
<script setup lang="ts">
import { ref } from 'vue'
import type { Node, Edge } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue'
// these are our nodes
const nodes = ref<Node[]>([
// an input node, specified by using `type: 'input'`
{
id: '1',
type: 'input',
position: { x: 250, y: 5 },
// all nodes can have a data object containing any data you want to pass to the node
// a label can property can be used for default nodes
data: { label: 'Node 1' },
},
// default node, you can omit `type: 'default'` as it's the fallback type
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
// An output node, specified by using `type: 'output'`
{
id: '3',
type: 'output',
position: { x: 400, y: 200 },
data: { label: 'Node 3' },
},
// this is a custom node
// we set it by using a custom type name we choose, in this example `special`
// the name can be freely chosen, there are no restrictions as long as it's a string
{
id: '4',
type: 'special', // <-- this is the custom node type name
position: { x: 400, y: 200 },
data: {
label: 'Node 4',
hello: 'world',
},
},
])
// these are our edges
const edges = ref<Edge[]>([
// default bezier edge
// consists of an edge id, source node id and target node id
{
id: 'e1->2',
source: '1',
target: '2',
},
// set `animated: true` to create an animated edge path
{
id: 'e2->3',
source: '2',
target: '3',
animated: true,
},
// a custom edge, specified by using a custom type name
// we choose `type: 'special'` for this example
{
id: 'e3->4',
type: 'special',
source: '3',
target: '4',
// all edges can have a data object containing any data you want to pass to the edge
data: {
hello: 'world',
}
},
])
</script>
<template>
<VueFlow :nodes="nodes" :edges="edges">
<!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
<template #node-special="specialNodeProps">
<SpecialNode v-bind="specialNodeProps" />
</template>
<!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
<template #edge-special="specialEdgeProps">
<SpecialEdge v-bind="specialEdgeProps" />
</template>
</VueFlow>
</template>
<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';
/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>vue
<script setup lang="ts">
import { computed } from 'vue'
import { Position, Handle } from '@vue-flow/core'
import type { NodeProps } from '@vue-flow/core'
const props = defineProps<NodeProps>()
const x = computed(() => `${Math.round(props.position.x)}px`)
const y = computed(() => `${Math.round(props.position.y)}px`)
</script>
<template>
<div class="vue-flow__node-default">
<div>{{ data.label }}</div>
<div>
{x} {y}
</div>
<Handle type="source" :position="Position.Bottom" />
</div>
</template>vue
<script setup lang="ts">
import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from '@vue-flow/core'
import { computed } from 'vue'
const props = defineProps<EdgeProps>()
const path = computed(() => getBezierPath(props))
</script>
<script>
export default {
inheritAttrs: false,
}
</script>
<template>
<!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
<BaseEdge :path="path[0]" />
<!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
<EdgeLabelRenderer>
<div
:style="{
pointerEvents: 'all',
position: 'absolute',
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
}"
class="nodrag nopan"
>
{{ data.hello }}
</div>
</EdgeLabelRenderer>
</template>TypeScript ​
As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer experience and prevention of common errors. The necessary type definitions are included with the library.
For more information, review our TypeDocs documentation.