🔥𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮𝗻 𝗻𝟴𝗻 𝗖𝗹𝗼𝗻𝗲 𝗶𝗻 𝗩𝘂𝗲

[MyrinNew]

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>
class="w-[500px] h-[500px] mx-auto">
class="w-[500px] h-[500px] rounded-2xl overflow-hidden">


class="basic-flow dark" :nodes="nodes" :edges="edges">

pattern-color="#7e7e7e" :gap="16" />







template>









More...