Built-In Components

Vue Flow comes with several additional components that you can plug into your flow. All you have to do is import and add them as children to the VueFlow component.

<script setup lang="ts">
import { Background, Controls, MiniMap, Panel, VueFlow } from '@xyflow/vue';
</script>
 
<template>
  <VueFlow>
    <MiniMap />
    <Controls />
    <Background />
    <Panel position="top-left">
      <h1>My Flow</h1>
    </Panel>
  </VueFlow>
</template>
 
<style>
@import '@xyflow/vue/style.css';
</style>

MiniMap

The MiniMap provides a bird’s-eye view of your flowgraph, making navigation easier, especially for larger flows. You can customize the appearance of nodes in the minimap by providing a nodeColor function.

MiniMapNode

For full control over how nodes are drawn in the minimap, MiniMap exposes a #node-<type> slot for each node type. The slot receives the same props as the default MiniMapNode renderer, which you can render (and tweak) directly:

<script setup lang="ts">
import { MiniMap, MiniMapNode, VueFlow } from '@xyflow/vue';
</script>
 
<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges">
    <MiniMap>
      <template #node-custom="props">
        <MiniMapNode v-bind="props" :color="props.selected ? '#16a34a' : '#ddd'" />
      </template>
    </MiniMap>
  </VueFlow>
</template>

Controls

Vue Flow comes with a set of customizable Controls for the viewport. You can zoom in and out, fit the viewport and toggle if the user can move, select and edit the nodes.

ControlButton

Add your own buttons to the Controls panel with the ControlButton component. It renders a button styled to match the built-in controls, takes an optional label (used as the accessible label and tooltip), and emits a click event:

<script setup lang="ts">
import { ControlButton, Controls, VueFlow } from '@xyflow/vue';
 
function logNodes() {
  // ...
}
</script>
 
<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges">
    <Controls>
      <ControlButton label="Log nodes" @click="logNodes">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 5v14M5 12h14" />
        </svg>
      </ControlButton>
    </Controls>
  </VueFlow>
</template>

Background

The Background component adds a visual grid pattern to your flowgraph, helping users maintain orientation. You can choose from different pattern variants, or if you need more advanced customization, you can explore the source code  to implement your own pattern.

Panel

The Panel component allows you to add fixed overlays to your flowgraph, perfect for titles, controls, or any other UI elements that should remain stationary.