vue-flow/packages/additional-components

Vue Flow: Additional Components

This package contains additional components that can be used with Vue Flow. These components include:

• Background
• Controls
  • ControlButton
• MiniMap
  • MiniMap Node

🛠 Setup

# install
$ yarn add @vue-flow/additional-components

# or
$ npm i --save @vue-flow/additional-components

🎮 Quickstart

<script setup>
import { VueFlow } from '@vue-flow/core'
import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
import initialElements from './initial-elements'

// some nodes and edges
const elements = ref(initialElements)
</script>
<template>
  <div style="height: 300px">
    <VueFlow v-model="elements">
      <!-- Adds a background to your graph. Use variant to specifiy which type of Background to use (lines, dots) -->
      <Background :variant="BackgroundVariant.Dots" />
      
      <!-- Adds zoom/interaction controls to your graph. You can add more buttons by using slots. -->
      <Controls />

      <!-- Adds a minimap to your graph. -->
      <MiniMap />
    </VueFlow>
  </div>
</template>