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'
</script>

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