Background

Vue Flow comes with two background pattern variants: dots and lines.

Installation

yarn add @vue-flow/background

# or
npm install @vue-flow/background

Usage

To use the background simply pass the Background component as a child to the VueFlow component.

<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>

Props

Name	Definition	Type	Optional	Default
variant	Pattern variant	BackgroundVariant	true	dots
gap	Pattern gap	number	true	10
size	Pattern size	number	true	0.4
patternColor	Pattern color	string	true	#81818a
bgColor	Background color (overwrites pattern)	string	true	#fff
height	Background height	number	true	100
width	Background width	number	true	100
x	X-offset	number	true	0
y	Y-offset	number	true	0