Skip to main content
The Background component renders a customizable background pattern (dots or lines) for your Vue Flow canvas.

​
Installation

npm install @vue-flow/background

​
Usage

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

const nodes = ref([])
const edges = ref([])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <Background variant="dots" :gap="20" :size="1" />
  </VueFlow>
</template>

​
Props

​
id
string
Unique identifier for the background pattern. Useful when multiple Vue Flow instances exist on the same page.
​
variant
'dots' | 'lines'
default:"'dots'"
The background pattern variant to display.
  • dots - Renders a dot pattern
  • lines - Renders a line grid pattern
​
gap
number | [number, number]
default:"20"
Spacing between pattern elements. Can be a single number for uniform spacing or a tuple [x, y] for different horizontal and vertical spacing.
​
size
number
default:"1"
Size of the pattern elements (dot radius for dots variant).
​
lineWidth
number
default:"1"
Width of the lines when using the lines variant.
​
color
string
Color of the background pattern. Accepts any valid CSS color value.
This replaces the deprecated patternColor prop.
​
patternColor
string
Deprecated - Use color instead. Will be removed in the next major version.
Background pattern color.
​
bgColor
string
Deprecated - Assign background color directly to VueFlow component instead. Will be removed in the next major version.
Background color behind the pattern.
​
offset
number | [number, number]
default:"0"
Offset for the pattern position. Can be a single number or a tuple [x, y].
​
x
number
default:"0"
X-coordinate offset for the background.
​
y
number
default:"0"
Y-coordinate offset for the background.
​
height
number
default:"100"
Deprecated property.
Height of the background as a percentage.
​
width
number
default:"100"
Deprecated property.
Width of the background as a percentage.

​
Slots

​
pattern
Custom slot to override the default pattern rendering. Receives the pattern context.
​
pattern-container
Custom slot to override the entire pattern container, including the SVG pattern definition.
​
default
Default slot that receives the patternId for custom rendering.

​
Examples

​
Dots Pattern

<Background variant="dots" :gap="15" :size="0.5" color="#81818a" />

​
Lines Pattern

<Background variant="lines" :gap="[20, 20]" :lineWidth="1" color="#e2e8f0" />

​
Custom Gap

<Background :gap="[30, 20]" variant="dots" />

​
TypeScript

import type { BackgroundProps } from '@vue-flow/background'

export enum BackgroundVariant {
  Lines = 'lines',
  Dots = 'dots',
}

​
Exports

  • Background - The main Background component
  • BackgroundVariant - Enum for background variant types (deprecated, use string literals instead)
  • BackgroundProps - TypeScript interface for component props

Build docs developers (and LLMs) love

Get started for freeTalk to us