Can't use style library like vuetify for my custom component

[SilasNiewierra]

Hey, I love the Drawflow library, and would like to style my Nodes. I tried a simple Node with vuetify, but it looks like this.

My code for this node: Trigger.vue

<template>
  <div class="header">
    <v-icon large color="green darken-2"> mdi-domain </v-icon>
    <div class="title">Trigger</div>
  </div>
  <hr />
  <div class="body">
    <p>If {{ triggerEvent }}</p>
    <v-btn>Click me</v-btn>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core'

export default defineComponent({
  data() {
    return {
      triggerEvent: '',
    }
  },
})
</script>

[jerosoler]

Hi @SilasNiewierra

Are you using vue2?

How is the code you use for "new Drawflow"? Pass the param "this"

[SilasNiewierra]

Hi I'm using Vue 3. With Vuetify 3 Alpha.

Editor.vue

<template>
  <div class="drawflowContainer">
    <div id="drawflow"></div>
    <app-bar mt-0 :zoom="zoom" :save="save" />
    <!-- <Menu :stepId="123" /> -->
    <!-- <Details :stepId="123" /> -->
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      editor: {},
    }
  },
  mounted() {
  const id = document.getElementById('drawflow')
  this.editor = new Drawflow(id, Vue)
  this.editor.start()
  const options = {} 
  editor.registerNode('TriggerStep', TriggerStep, {}, options)
  const data = {}
  this.editor.addNode( 'Name', 0, 1,150, 100, 'Class', data, 'TriggerStep',  'vue',    )
   }
})

[jerosoler]

uhmmm...

In vue 2 we could pass the instance. Example: code:

this.editor = new Drawflow(id, Vue, this);

https://vuejs.org/v2/api/#parent

The problem is the Vue3 createApp not is possible pass parent instance.

Actuallly draflow in vue 3 mount component with:

createApp({
render: h => h('<h1></h1>' props, options)
}).mount(content);

I haven't played much with vue3, can you think of a way to pass the instance?

Is it possible to assemble a component on the fly? Without createapp?

I've been looking at the documentation for vue3. https://v3.vuejs.org/api/composition-api.html#getcurrentinstance

[SilasNiewierra]

Hi Jero,

thanks for having a look at this. I'm fairly new to Vue 3 as well. I don't know of a way to assemble a component on the fly, or pass the instance of the parent to the child. Actually, I tried it with

this.editor = new Drawflow(id, Vue, this);

but still, no vuetify style inside the Nodes.

[jerosoler]

Update library to 0.0.50 and npm packages with changes comment in #274

npm install drawflow@0.0.50

[jerosoler]

Create a example with vue 3 and repo demo.

Repo: https://github.com/jerosoler/drawflow-vue3-example Demo: https://jerosoler.github.io/drawflow-vue3-example/

Vue3 + Vite + Element Plus

[SilasNiewierra]

Thanks 😄 , I will check it out as soon as possible 👍