Edge Labels

One of the more common uses for custom edges is rendering some controls or info along an edge’s path. In Vue Flow we call that an edge label and unlike the edge path, edge labels can be any Vue component!

Adding an edge label

Because Vue Flow’s edges are mounted inside an SVG component, we need to escape its context to render a custom edge label. For this, we have a handy <EdgeLabelRenderer /> component. It functions as a portal that mounts the child components in the viewport div.

Let’s add a button to our custom edge that can be used to delete the edge it’s attached to:

CustomEdge.vue


<script setup lang="ts">
import type { EdgeProps } from '@xyflow/vue';
import { computed } from 'vue';
 
import { BaseEdge, EdgeLabelRenderer, getStraightPath, useVueFlow } from '@xyflow/vue';
 
const props = defineProps<EdgeProps>();
 
const { removeEdges } = useVueFlow();
 
const path = computed(() =>
  getStraightPath({
    sourceX: props.sourceX,
    sourceY: props.sourceY,
    targetX: props.targetX,
    targetY: props.targetY,
  }),
);
</script>
 
<template>
  <BaseEdge :id="id" :path="path[0]" />
 
  <EdgeLabelRenderer>
    <div
      class="nodrag nopan"
      :style="{
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2]}px)`,
        pointerEvents: 'all',
      }"
    >
      <button @click="removeEdges(id)">delete</button>
    </div>
  </EdgeLabelRenderer>
</template>

To make sure our edge labels are interactive and not just for presentation, it is important to add pointer-events: all along with the nodrag and nopan classes to the label to stop mouse events from controlling the canvas.

Here’s an interactive example with our updated custom edge. Clicking the delete button will remove that edge from the flow.