Vuejs/Nuxt: Adding dynamic Nodes to edit is not working and getting error.

[Aravinda93]

I am new to DrawFlow and trying to create the Nodes dynamically within the Vue/Nuxtjs application. I have followed below steps:

1. Install the drawflow using npm i drawflow --save

2. Create a drawflow.js file under plugins folder and add the code:

   import Vue from 'vue'
   import Drwaflow from 'drawflow'
   Vue.use(Drwaflow)

3. Modify the nuxt-config.js file and add the plugin and build:

   plugins: [
   { src: "~/plugins/drawflow", mode:"client" }
   ],
   
   build: {
   transpile: ["drawflow"]
   },

4. The complete code has been added in CodeSandbox.

When I run and try to add the Node nothing happens on the Editor. Also, I see following error in my console:

classCallCheck.js:3 Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (classCallCheck.js:3)
    at i (drawflow.min.js:164)

Can someone please let me know what am I doing wrong? I would like to create the dynamic node something like this where for every Add Node button click I want to create a new Node on the editor:

[kissu]

You need to not forget to transpile as told in this section.

Then, this kind of code should make the whole thing work

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1>Drawflow</h1>
        <div id="drawflow-graph" ref="drawflow" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      editor: {},
    }
  },
  async mounted() {
    const importedModule = await import('drawflow')
    const Drawflow = importedModule.default
    this.editor = new Drawflow(this.$refs.drawflow, Vue, this)
    this.editor.start()
    this.editor.addNode(
      'github',
      0,
      1,
      150,
      300,
      'github',
      'name',
      'Cool Vue example'
    )
  },
}
</script>

<style>
@import 'drawflow/dist/drawflow.min.css';
#drawflow-graph {
  width: 800px;
  height: 800px;
  border: 2px solid teal;
}
</style>

Working perfectly fine on my side

[Aravinda93]

@kissu Thanks for the response. Closing the issue :)