@vue-flow/controls

This is a control component for Vue Flow. It can be used to control the canvas interactions, like zooming in, zooming out, fitting the view and locking interactions.

9,862,020 6,922

vue typescript vue3 flow diagram editor graph node link port slot composition-api vue-flow vueflow

Install
`npm install @vue-flow/controls`
Latest Version:	1.1.3 (Aug 7, 2025)
Vue:	3
License:	MIT
Last Updated:	Jul 14, 2026
Links:	GitHub · npm

Maintainer: braks

Vue Flow: Controls Component

This is a control component for Vue Flow. It can be used to control the canvas interactions, like zooming in, zooming out, fitting the view and locking interactions.

🛠 Setup

# install
$ yarn add @vue-flow/controls

# or
$ npm i --save @vue-flow/controls

🎮 Quickstart

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

// import default controls styles
import '@vue-flow/controls/dist/style.css'

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">
    <Controls />
  </VueFlow>
</template>