Vben Admin: Extending with Vue Flow for Advanced Flow Editing

Posted on

Adding Vue Flow to Your Project

This guide will walk you through integrating Vue Flow into your Monorepo project, including installing dependencies, setting up routing, and creating an editable flow page.

Installing Dependencies

Follow these steps to ensure a smooth installation of Vue Flow:

Step 1: Clean Existing Dependencies

Start by cleaning your current dependencies to avoid conflicts:

1
2
3
4
5
# Run in the root directory of your project
pnpm clean

# Remove node_modules
rm -rf node_modules

Step 2: Clean PNPM Cache

Clear the cache to prevent issues with outdated or corrupted packages:

1
pnpm store prune

Step 3: Reinstall All Dependencies

Reinstall the dependencies to ensure your lockfile is up to date:

1
pnpm install

Step 4: Install Vue Flow Dependencies

Navigate to the correct subproject directory and install the necessary Vue Flow packages:

1
2
3
4
5
6
7
8
# Enter the subproject directory
cd packages/web-antd

# Install core package
pnpm add @vue-flow/core

# Install additional components (recommended)
pnpm add @vue-flow/background @vue-flow/controls @vue-flow/minimap @vue-flow/node-toolbar

By following this order, you can:

  1. Ensure proper dependency management (Vue Flow Documentation).
  2. Keep your lockfile in sync.
  3. Avoid dependency conflicts.

Once installed, you can start importing and using Vue Flow in your project (Documentation).

Creating a Flow Editor Page

Step 1: Define the Route

Add a route file for your process editor: src/router/routes/modules/process.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { BasicLayout } from '#/layouts';
import { $t } from '#/locales';
import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
    {
        component: BasicLayout,
        meta: {
            icon: 'fluent:flow-16-regular',
            order: 100,
            title: $t('process.manager'),
        },
        name: 'Process',
        path: '/process',
        redirect: '/process/list',
        children: [
            {
                name: 'ProcessList',
                path: 'list',
                component: () => import('#/views/process/index.vue'),
                meta: {
                    title: $t('process.list'),
                },
            },
            {
                name: 'ProcessEditor',
                path: 'edit',
                component: () => import('#/views/process/edit.vue'),
                meta: {
                    title: 'Flow Editor',
                },
            },
        ],
    },
];

export default routes;

Step 2: Create the Editor Page

Create the flow editor component: src/views/process/edit.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script setup lang="ts">
import { Background } from '@vue-flow/background';
import { Controls } from '@vue-flow/controls';
import { VueFlow, useVueFlow } from '@vue-flow/core';
import { MiniMap } from '@vue-flow/minimap';
import type { Edge, Node } from '@vue-flow/core';
import { ref } from 'vue';

const nodes = ref<Node[]>([
    { id: '1', type: 'input', position: { x: 250, y: 5 }, data: { label: 'Start' } },
    { id: '2', position: { x: 100, y: 100 }, data: { label: 'Process' } },
    { id: '3', type: 'output', position: { x: 400, y: 200 }, data: { label: 'End' } },
]);

const edges = ref<Edge[]>([
    { id: 'e1-2', source: '1', target: '2' },
    { id: 'e2-3', source: '2', target: '3', animated: true },
]);

const { onNodeClick, onConnect, addEdges } = useVueFlow();

onNodeClick(({ node }) => {
    console.log('Node clicked:', node);
});

onConnect((params) => {
    addEdges([
        { id: `e${params.source}-${params.target}`, source: params.source, target: params.target },
    ]);
});
</script>

<template>
    <div class="h-full">
        <VueFlow v-model="nodes" :edges="edges" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4" class="h-full" fit-view-on-init>
            <Background />
            <Controls />
            <MiniMap />
        </VueFlow>
    </div>
</template>

<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';
</style>

Demo Preview

The result should look like the following interface, featuring a simple flow editor with nodes and edges:

Flow Editor Demo