@vue-flow/background

This is a background component for Vue Flow. It can be used to create a background in your canvas.
12,886,433 6,922
vue typescript vue3 flow diagram editor graph node link port slot composition-api vue-flow vueflow
Install
npm install @vue-flow/background
Latest Version:1.3.2
Vue:3
License:MIT
Last Updated:Jul 14, 2026
Links: GitHub  ·  npm
Maintainer: braks

Vue Flow: Background Component

This is a background component for Vue Flow. It can be used to create a background in your canvas.

🛠 Setup

# install
$ yarn add @vue-flow/background

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

🎮 Quickstart

<script setup>
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import initialElements from './initial-elements'

// some nodes and edges
const elements = ref(initialElements)
</script>

<template>
  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
    <Background />
  </VueFlow>
</template>

Related Packages

@vue-flow/core
16,735,981 6,922
composition-api diagram editor flow graph link node port slot typescript +4
@vue-flow/controls

This is a control component for Vue Flow. It can be used to control the canvas i...

9,862,020 6,922
composition-api diagram editor flow graph link node port slot typescript +4
@vue-flow/minimap

This is a minimap component for Vue Flow. It can be used to add a minimap to the...

8,118,301 6,922
composition-api diagram editor flow graph link node port slot typescript +4
@vue-flow/node-resizer

This is a resizer component for Vue Flow. It can be used to resize your nodes.

3,424,741 6,920
composition-api diagram editor flow graph link node port slot typescript +4
@vue-flow/pathfinding-edge

__Custom edge that avoids crossing nodes__

128,023 6,913
composition-api diagram editor flow graph link node port slot typescript +4

Version History

Version Released Vue License
1.3.2 ^3.3.0 MIT
1.3.1 ^3.3.0 MIT
1.3.0 ^3.3.0 MIT
1.2.0 ^3.2.25 MIT
1.1.0 ^3.2.25 MIT