Skip to content

Getting Started ​

Prerequisites ​

Installation ​

bash
npm i --save @vue-flow/core

yarn add @vue-flow/core

pnpm i @vue-flow/core
npm i --save @vue-flow/core

yarn add @vue-flow/core

pnpm i @vue-flow/core

Usage ​

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.

You can find the TypeDocs here.

Released under the MIT License.