Skip to content
On this page

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

NameDefinitionTypeOptionalDefault
variantPattern variantBackgroundVarianttruedots
gapPattern gapnumbertrue10
sizePattern sizenumbertrue0.4
patternColorPattern colorstringtrue#81818a
bgColorIs node draggingbooleantrue#fff
heightBackground heightnumbertrue100
widthBackground widthnumbertrue100
xX-offsetnumbertrue0
yY-offsetnumbertrue0

Released under the MIT License.