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

npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelte

Your 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.

Next steps

What is a workflow?

The mental model behind the editor.

Connect a backend

The REST endpoints FlowDrop calls.