Hey, you can use https://github.com/jagenjo/litegraph.js.
Based on vue-blocks. A @ghostiam's project.
npm i @krthr/vue-dataflow-editor
Import the lib on app.js
// app.js or main.js, or the main file // where you create the vue app import Vue from "vue"; // other imports import "@krthr/vue-dataflow-editor"; import "@krthr/vue-dataflow-editor/dist/vue-dataflow-editor.css"; const app = new Vue({ /* ... */ });
<template> <vue-blocks-container class="container" :blocks-content="[]" :scene.sync="{}" /> </template>
<body> <div id="app"> <vue-blocks-container ref="container" :blocks-content="[]" :scene.sync="{}" class="container" /> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/@krthr/vue-dataflow-editor@latest/dist/vue-dataflow-editor.umd.min.js"></script> <script> new Vue({ el: "#app", // ... }); </script> </body>