Connection Validation

To validate connections before they are created you can either pass a function to the is-valid-connection prop of the <Handle /> component or use the onConnect event of the <VueFlow /> component.

Another alternative is to pass a isValidConnection function to the is-valid-connection prop of the <VueFlow /> component. This function will be applied to all connections in the flow (even existing ones).

Using a handle in a custom node

vue

<div>
  <!-- ... -->
  <Handle type="source" :is-valid-connection="isValidConnection"/>
</div>

Connection Validation ​

Using a handle in a custom node ​

Connection Validation

Using a handle in a custom node