Vue FlowTaking Control of Vue Flow ​
Vue Flow is designed to be flexible and customizable, allowing you to take control of the flow of your application. By default, Vue Flow will apply changes automatically, so you don't have to worry about it.
WARNING
This API is subject to change in the next major release where changes will most likely not be applied automatically anymore.
Though, there are cases where you want to take control of changes and apply them manually after some processing and validations for example.
This guide will show you how to take control of Vue Flow and apply these changes manually.
The applyChanges option ​
The applyChanges option is a flag that can be passed to the VueFlow component to enable or disable automatic change handling.
By setting this option to false, we tell Vue Flow to not apply changes automatically anymore.
<template>
<VueFlow v-model="elements" :apply-changes="false" />
</template><template>
<VueFlow v-model="elements" :apply-changes="false" />
</template>onNodesChange / onEdgesChange events ​
Vue Flow provides two events that can be used to listen to changes on nodes and edges. These events are emitted regardless of the applyChanges option, so you can use them to listen to changes even if you have automatic changes enabled.
<script setup>
const onChange = (changes) => {
// changes are arrays of type `NodeChange` or `EdgeChange`
console.log(changes) // will log the changes
}
</script>
<template>
<VueFlow v-model="elements" @nodes-change="onChange" @edges-change="onChange" />
</template><script setup>
const onChange = (changes) => {
// changes are arrays of type `NodeChange` or `EdgeChange`
console.log(changes) // will log the changes
}
</script>
<template>
<VueFlow v-model="elements" @nodes-change="onChange" @edges-change="onChange" />
</template>applyNodeChanges / applyEdgeChanges ​
Vue Flow provides two functions that can be used to apply changes manually.
These functions are available from the useVueFlow composable.
<script setup>
import { useVueFlow } from '@vue-flow/core'
const { applyNodeChanges, applyEdgeChanges } = useVueFlow();
const onChange = (changes) => {
// apply changes manually
applyNodeChanges(changes)
}
</script><script setup>
import { useVueFlow } from '@vue-flow/core'
const { applyNodeChanges, applyEdgeChanges } = useVueFlow();
const onChange = (changes) => {
// apply changes manually
applyNodeChanges(changes)
}
</script>Validating Changes ​
Using what we just learned, we can now take control of changes and apply them manually.
In this example, we will first disable automatic change handlers with applyChanges, then use the onNodesChange event to listen to changes and validate delete changes and, if they are valid, use applyNodeChanges to apply them.
<script setup>
import { useVueFlow, VueFlow } from '@vue-flow/core'
import { ref } from 'vue'
const { applyNodeChanges } = useVueFlow();
const { confirm } = useConfirm();
const elements = ref([
{
id: '1',
label: 'Node 1',
position: { x: 0, y: 0 },
},
{
id: '2',
label: 'Node 2',
position: { x: 100, y: 100 },
},
{
id: 'e1-2',
source: '1',
target: '2',
},
])
const onNodesChange = (changes) => {
changes.forEach(async (change) => {
// if the change is a remove change, we want to validate it first
if (change.type === 'remove') {
const isConfirmed = await confirm();
if (isConfirmed) {
// if confirmed, apply the change
applyNodeChanges([change])
}
} else {
// apply all other changes
applyNodeChanges([change])
}
})
}
</script>
<template>
<VueFlow v-model="elements" :apply-changes="false" @nodes-change="onNodesChange" />
</template><script setup>
import { useVueFlow, VueFlow } from '@vue-flow/core'
import { ref } from 'vue'
const { applyNodeChanges } = useVueFlow();
const { confirm } = useConfirm();
const elements = ref([
{
id: '1',
label: 'Node 1',
position: { x: 0, y: 0 },
},
{
id: '2',
label: 'Node 2',
position: { x: 100, y: 100 },
},
{
id: 'e1-2',
source: '1',
target: '2',
},
])
const onNodesChange = (changes) => {
changes.forEach(async (change) => {
// if the change is a remove change, we want to validate it first
if (change.type === 'remove') {
const isConfirmed = await confirm();
if (isConfirmed) {
// if confirmed, apply the change
applyNodeChanges([change])
}
} else {
// apply all other changes
applyNodeChanges([change])
}
})
}
</script>
<template>
<VueFlow v-model="elements" :apply-changes="false" @nodes-change="onNodesChange" />
</template>