Skip to content

Background ​

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

Installation ​

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

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

<template>
  <VueFlow>
    <Background />
  </VueFlow>
</template>

Props ​

NameDefinitionTypeOptionalDefault
variantPattern variantBackgroundVarianttruedots
gapPattern gapnumbertrue10
sizePattern sizenumbertrue0.4
patternColorPattern colorstringtrue#81818a
bgColorBackground color (overwrites pattern)stringtrue#fff
heightBackground heightnumbertrue100
widthBackground widthnumbertrue100
xX-offsetnumbertrue0
yY-offsetnumbertrue0

Released under the MIT License.