diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts index 5ede9bd0..8dca89a3 100644 --- a/docs/src/.vitepress/config.mts +++ b/docs/src/.vitepress/config.mts @@ -159,6 +159,10 @@ export default defineConfigWithTheme({ items: [ { text: 'Configuration', link: '/guide/vue-flow/config' }, { text: 'State', link: '/guide/vue-flow/state' }, + { + text: 'Events', + link: '/guide/vue-flow/events', + }, { text: 'Actions', link: '/typedocs/interfaces/Actions.html', @@ -167,10 +171,6 @@ export default defineConfigWithTheme({ text: 'Getters', link: '/typedocs/interfaces/Getters.html', }, - { - text: 'Events', - link: '/typedocs/interfaces/FlowEvents.html', - }, { text: 'Slots', link: '/guide/vue-flow/slots' }, ], }, diff --git a/docs/src/guide/vue-flow/events.md b/docs/src/guide/vue-flow/events.md new file mode 100644 index 00000000..7763e20d --- /dev/null +++ b/docs/src/guide/vue-flow/events.md @@ -0,0 +1,72 @@ +--- +title: Events +--- + +# Events + +VueFlow provides a set of events that you can listen to in order to react to changes in the flow. + +A full list of events can be found in the [API Reference](/typedocs/interfaces/FlowEvents.html). + +## Listening to Events + +### VueFlow Component + +You can listen to events on the VueFlow component by using the `@` directive: + +```vue + + + +``` + +### Flow Instance / `useVueFlow` + +You can also listen to events on the Flow instance by using the event hooks. + +All events are available from `useVueFlow` as `on`. For example, the `node-click` event is available as `onNodeClick`. + +```vue + + + +```