> ## Documentation Index
> Fetch the complete documentation index at: https://flowdrop.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```bash npm theme={null}
  npm install @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
  ```

  ```bash pnpm theme={null}
  pnpm add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
  ```

  ```bash yarn theme={null}
  yarn add @flowdrop/flowdrop @iconify/svelte @xyflow/svelte
  ```
</CodeGroup>

<Note>
  **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](/docs/quickstart) for the
  full config.
</Note>

## 2. Mount the editor

```vue theme={null}
<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>
```

<Note>
  **FlowDrop needs a backend.**

  It serves nodes and stores workflows. Point `endpointConfig` at your API, or
  [run a ready-made server](/server-implementations/overview).
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="What is a workflow?" icon="diagram-project" href="/concepts/what-is-a-workflow">
    The mental model behind the editor.
  </Card>

  <Card title="Connect a backend" icon="server" href="/guides/integration/backend-implementation">
    The REST endpoints FlowDrop calls.
  </Card>
</CardGroup>