Vue
Mount a FlowDrop editor into a Vue 3 component.
In Vue 3, mount FlowDrop on onMounted using a template ref, and tear it down on
onBeforeUnmount. No Svelte knowledge required.
1. Install
npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelteYour bundler needs the Svelte plugin.
FlowDrop ships its UI as Svelte 5 components, so your bundler must compile them
(you won't write any Svelte). With Vite, add @sveltejs/vite-plugin-svelte and
svelte as dev dependencies and enable the plugin alongside the Vue plugin —
see the Bundler setup section of the quick start for the
full config.
2. Mount the editor
<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { mountFlowDropApp } from '@flowdrop/flowdrop/editor';
import { createEndpointConfig } from '@flowdrop/flowdrop/core';
import '@flowdrop/flowdrop/styles';
const container = ref(null);
let app;
onMounted(async () => {
app = await mountFlowDropApp(container.value, {
endpointConfig: createEndpointConfig('/api/flowdrop'),
eventHandlers: {
onAfterSave: async (workflow) => console.log('Saved:', workflow.id),
},
});
});
onBeforeUnmount(() => app?.destroy());
</script>
<template>
<div ref="container" style="height: 100vh" />
</template>FlowDrop needs a backend.
It serves nodes and stores workflows. Point endpointConfig at your API, or
run a ready-made server.