Skip to main content
The Controls component provides UI controls for zooming, fitting the view, and toggling interactivity in your Vue Flow canvas.

​
Installation

npm install @vue-flow/controls
Don’t forget to import the styles: import '@vue-flow/controls/dist/style.css'

​
Usage

<script setup>
import { VueFlow } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls'
import '@vue-flow/controls/dist/style.css'

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

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <Controls />
  </VueFlow>
</template>

​
Props

​
showZoom
boolean
default:"true"
Show zoom in/out buttons.
​
showFitView
boolean
default:"true"
Show the fit view button that adjusts the viewport to fit all nodes.
​
showInteractive
boolean
default:"true"
Show the interactive toggle button that locks/unlocks node dragging and selection.
​
fitViewParams
FitViewParams
Parameters to pass to the fitView function when the fit view button is clicked.
interface FitViewParams {
  padding?: number
  includeHiddenNodes?: boolean
  minZoom?: number
  maxZoom?: number
  duration?: number
  nodes?: Node[]
}
​
position
PanelPosition
default:"'bottom-left'"
Position of the controls panel on the canvas.Options: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'

​
Events

​
@zoom-in
() => void
Emitted when the zoom in button is clicked.
​
@zoom-out
() => void
Emitted when the zoom out button is clicked.
​
@fit-view
() => void
Emitted when the fit view button is clicked.
​
@interaction-change
(active: boolean) => void
Emitted when the interactive toggle is clicked. Receives the new interactive state.

​
Slots

​
top
Content to display at the top of the controls panel.
​
control-zoom-in
Override the default zoom in button.
​
control-zoom-out
Override the default zoom out button.
​
control-fit-view
Override the default fit view button.
​
control-interactive
Override the default interactive toggle button.
​
icon-zoom-in
Override the zoom in icon.
​
icon-zoom-out
Override the zoom out icon.
​
icon-fit-view
Override the fit view icon.
​
icon-lock
Override the lock icon (shown when interactive).
​
icon-unlock
Override the unlock icon (shown when not interactive).
​
default
Additional content to display at the bottom of the controls panel.

​
Examples

​
Custom Position

<Controls position="top-right" />

​
Hide Specific Controls

<Controls :show-interactive="false" :show-fit-view="false" />

​
Custom Controls with Slots

<template>
  <Controls>
    <template #top>
      <button @click="customAction">Custom Action</button>
    </template>
  </Controls>
</template>

​
Handle Events

<script setup>
function onZoomIn() {
  console.log('Zoomed in')
}

function onInteractionChange(isActive: boolean) {
  console.log('Interactive:', isActive)
}
</script>

<template>
  <Controls 
    @zoom-in="onZoomIn"
    @interaction-change="onInteractionChange"
  />
</template>

​
TypeScript

import type { ControlProps } from '@vue-flow/controls'
import { PanelPosition } from '@vue-flow/core'

​
Exports

  • Controls - The main Controls component
  • ControlButton - A styled button component for custom controls
  • ControlProps - TypeScript interface for Controls props

Build docs developers (and LLMs) love

Get started for freeTalk to us