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

August 30, 2025

This content originally appeared on DEV Community and was authored by Youssef Abdulaziz

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>

This content originally appeared on DEV Community and was authored by Youssef Abdulaziz