Ever thought about how tools like hashtag#๐ป๐ด๐ป or hashtag#๐ญ๐ฎ๐ฝ๐ถ๐ฒ๐ฟ build their visual automation editors?
Turns out, with hashtag#Vue itโs easier than youโd think.
โจ Features:
โข Custom styled nodes (dark mode, Tailwind)
โข Connectable edges
โข Background grid
This is just the first step toward building your own workflow editor. Add draggable node creation, triggers, and persistence โ and youโre halfway to making your own n8n clone in Vue ๐
Hereโs a minimal flow editor using ๐๐๐ฒโ๐ณ๐น๐ผ๐ :
<script setup>
import { ref } from "vue"
import { VueFlow, useVueFlow } from "@vue-flow/core"
import { Background } from '@vue-flow/background'
import "@vue-flow/core/dist/style.css"
const nodes = ref([
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 0 },
class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
},
{
id: '2',
type: 'output',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
}
])
const edges = ref([
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3',source: '1',target: '3',label: 'edge with text' },
])
</script>
<template>
<div class="w-[500px] h-[500px] mx-auto">
<div class="w-[500px] h-[500px] rounded-2xl overflow-hidden">
<!-- Flow Canvas -->
<VueFlow class="basic-flow dark" :nodes="nodes" :edges="edges">
<Background pattern-color="#7e7e7e" :gap="16" />
</VueFlow>
</div>
</div>
</template>
Top comments (0)