Skip to main content

​
Installation

Vue Flow is distributed as an npm package. You can install it using your preferred package manager.

​
Prerequisites

Before installing Vue Flow, make sure you have:
  • Node.js v20 or above installed
  • Vue 3.3 or above in your project
Vue Flow requires Vue 3.3 or higher. It does not support Vue 2 as it uses features exclusive to Vue 3.

​
Install the Package

Choose your preferred package manager to install the core Vue Flow package: 
npm install @vue-flow/core

​
Import Required Styles

Vue Flow requires CSS styles to work correctly. Import these styles in your main application file or component: 
/* Required styles for Vue Flow */
@import '@vue-flow/core/dist/style.css';

/* Default theme (optional but recommended) */
@import '@vue-flow/core/dist/theme-default.css';
The base styles (style.css) are required for Vue Flow to function properly. The default theme (theme-default.css) is optional but provides sensible defaults for nodes and edges.
Do not scope these styles with the scoped attribute in your Vue components. They need to be globally available.

​
Example Setup

Here’s how to import the styles in your main application file: 
import { createApp } from 'vue'
import App from './App.vue'

// Import Vue Flow styles
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

const app = createApp(App)
app.mount('#app')

​
Optional Packages

Vue Flow offers additional packages for extended functionality:

​
Background

Add customizable background patterns to your flow: 
npm install @vue-flow/background

​
MiniMap

Display a mini overview map of your flow: 
npm install @vue-flow/minimap

​
Controls

Add interactive zoom and control buttons: 
npm install @vue-flow/controls

​
Node Toolbar

Add contextual toolbars to your nodes: 
npm install @vue-flow/node-toolbar

​
Node Resizer

Enable node resizing functionality: 
npm install @vue-flow/node-resizer
You can install multiple packages at once:
npm install @vue-flow/core @vue-flow/background @vue-flow/controls @vue-flow/minimap

​
TypeScript Support

Vue Flow is written entirely in TypeScript and includes type definitions out of the box. No additional packages are needed for TypeScript support. 
import type { Node, Edge } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
For the best developer experience and to catch common errors early, we highly recommend using TypeScript with Vue Flow.

​
Verify Installation

To verify that Vue Flow is installed correctly, create a simple flow: 
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { id: '1', position: { x: 0, y: 0 }, label: 'Node 1' }
])
</script>

<template>
  <div style="height: 400px">
    <VueFlow :nodes="nodes" />
  </div>
</template>
Make sure to set a height on the VueFlow container element. Without a defined height, the component won’t be visible.

​
Next Steps

Quick Start Guide

Learn how to create your first interactive flowchart with Vue Flow

Build docs developers (and LLMs) love

Get started for freeTalk to us