Vue FlowGetting Started ​
Prerequisites ​
Installation ​
bash
npm i --save @vue-flow/core
yarn add @vue-flow/core
pnpm i @vue-flow/corenpm i --save @vue-flow/core
yarn add @vue-flow/core
pnpm i @vue-flow/coreUsage ​
A flow consists of nodes and (optionally) edges. Together we call them elements.
Each element needs a unique id. A node also needs a xy-position. An edge needs at least a source (node id) and a target (node id).
vue
<script setup>
import { VueFlow } from '@vue-flow/core'
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
// Default nodes, you can omit `type: 'default'`
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
// An output node, specified by using `type: 'output'`
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{ id: 'e1-3', source: '1', target: '3' },
// An animated edge
{ id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>
<template>
<VueFlow v-model="elements" />
</template><script setup>
import { VueFlow } from '@vue-flow/core'
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
// Default nodes, you can omit `type: 'default'`
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
// An output node, specified by using `type: 'output'`
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{ id: 'e1-3', source: '1', target: '3' },
// An animated edge
{ id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>
<template>
<VueFlow v-model="elements" />
</template>Necessary styles
Make sure you include the necessary styles. See the Theming section for more info.
TypeScript ​
Vue Flow is fully written in TypeScript, so it is highly recommended to use TypeScript to have the best possible DX and avoid common mistakes. The types are included in the library.