cannot use global plugins. value was undefined on the added node component

[shidcordero]

I am trying to use my global plugins in the node added in the drawflow but the instance of it are all undefined

This is only happening on the node so I suspect its the library. Any solution on this?

BTW, I'm using nuxt so I'm thinking if this is also a problem only in Nuxt since we pass the Vue instance on initializing the code like below this.editor = new Drawflow(this.$refs.drawflow, Vue)

[shidcordero]

this is already an ultimate blocker for me now, when I add a component on the node, and that component uses my localisation library (this.$t) then it also complains that it is undefined.

[jerosoler]

Try:

import Vue from 'vue'
import Drawflow from 'drawflow' 
import styleDrawflow from 'drawflow/dist/drawflow.min.css'
import component from '~/components/testcomponent.vue'

export default {
  data() {
    return {
      editor: null,
    }
  },
  mounted() {

    const id = this.$refs.drawflow;
    this.editor = new Drawflow(id, Vue)

    this.editor.start();

    this.editor.registerNode('nameofcomponent', component, { }, this);
    this.editor.addNode('github', 0, 1, 150, 300, 'github', {}, 'nameofcomponent', 'vue');
   // console.log(this.$config);

  }
}

Added in the register node this

    this.editor.registerNode('nameofcomponent', component, { }, this);

And the component:

<template>
      <el-button type="primary">Primary</el-button>
</template>
<script>
export default {
    mounted() {

        var that = this.$options.parent.$options.$root
        console.log(that.$axios);

    },
}
</script>

[shidcordero]

this somehow okay, if only I dont add other component in my code but what happens is I also have other component (CommonModal for example) which already used almost everywhere in my code and it mainly uses localisation. So adding it like in my node code below, this will still throw the undefined error

<template>
  <div>
    <b-card
      header-class="border-bottom p-50"
      class="node-card h-100 mb-0"
      no-body
    >
      <template #header>
        <div class="w-100 d-flex flex-row justify-content-between">
          <span>{{ self.$t('drawflow.node_action.label.name') }}</span>
          <div v-if="isSelected" class="w-100 d-flex justify-content-end">
            <FeatherIcon
              icon="SettingsIcon"
              size="14"
              class="mr-25 text-primary pointer-cursor"
              @click="onNodeUpdateClick($event)"
            />

            <FeatherIcon
              icon="TrashIcon"
              size="14"
              class="text-danger pointer-cursor"
              @click="onNodeDeleteClick($event)"
            />
          </div>
        </div>
      </template>
      <div class="m-50 text-center node-title text-overflow">
        {{ action.title }}
      </div>
    </b-card>

    <b-modal
      :id="modalId"
      :title="
        dataCopy
          ? self.$t('drawflow.node_action.label.edit_action')
          : self.$t('drawflow.node_action.label.add_action')
      "
      size="md"
      no-close-on-backdrop
      no-close-on-esc
      @cancel="cancelModal"
      @hidden="resetModal"
    >
      <b-form :id="formId">
        <b-form-group :disabled="saving" class="mb-0">
          <b-form-group
            :label="self.$t('drawflow.node_action.label.title')"
            label-for="action-title"
          >
            <b-form-input
              id="action-title"
              v-model.trim="$v.action.title.$model"
              :state="$v.action.title.$dirty ? !$v.action.title.$invalid : null"
              :placeholder="self.$t('drawflow.node_action.placeholder.title')"
            />

            <b-form-invalid-feedback
              :state="$v.action.title.$dirty ? !$v.action.title.$invalid : true"
            >
              {{
                self.$t('drawflow.node_action.error_message.validation.title')
              }}
            </b-form-invalid-feedback>
          </b-form-group>
          <b-form-group
            :label="self.$t('drawflow.node_action.label.text')"
            label-for="action-text"
          >
            <b-form-textarea
              id="action-text"
              v-model.trim="$v.action.text.$model"
              :state="$v.action.text.$dirty ? !$v.action.text.$invalid : null"
              :placeholder="self.$t('drawflow.node_action.placeholder.text')"
              rows="3"
              max-rows="6"
              maxlength="8000"
            />

            <b-form-invalid-feedback
              :state="$v.action.text.$dirty ? !$v.action.text.$invalid : true"
            >
              {{
                self.$t('drawflow.node_action.error_message.validation.text')
              }}
            </b-form-invalid-feedback>
          </b-form-group>
        </b-form-group>
      </b-form>

      <template #modal-footer="{ cancel }">
        <b-button
          type="button"
          variant="outline-secondary"
          :disabled="saving"
          @click.prevent="cancel()"
        >
          {{ self.$t('common.label.cancel') }}
        </b-button>
        <b-button
          v-ripple.400="'rgba(255, 255, 255, 0.15)'"
          type="button"
          variant="primary"
          :disabled="saving"
          @click.prevent="save"
        >
          <b-spinner v-if="saving" :label="self.$t('loading')" small />
          <span v-else>{{ self.$t('common.label.save') }}</span>
        </b-button>
      </template>
    </b-modal>

    <CommonModals
      ref="commonModals"
      :delete-confirmation-id="`action-delete-modal-${nodeId}`"
      :delete-confirmation="true"
      @onDelete="deleteNode"
    />
  </div>
</template>

[shidcordero]

@jerosoler so I found a fix and wanted to create a PR but I dont have access yet. Can you help me with it?

[jerosoler]

Hi! @shidcordero

PR is open.

Or comment your changes here.

Jero

[shidcordero]

changes at line 2 constructor(container, render = null, parent = null) {

added at line 34 this.parent = parent

added at line 1381 parent: this.parent,

now, the drawflow can be initialize as const editor = new Drawflow(this.$refs.drawflow, Vue, this), where this is the component context

I am not sure how to do this in Vue 3 so I'll leave it up to you :)

[jerosoler]

It seems to work! I investigate! And I try with vue and with vue3.

[jerosoler]

Fix in new release 0.0.44.

Thanks! ;)

[idling-mind]

For me, <el-button> doesnt render inside a node. I get this warning. [Vue warn]: Failed to resolve component: el-button. I am following your example shown in https://github.com/jerosoler/Drawflow#for-vue-3-example and https://github.com/jerosoler/Drawflow#register-node.

<el-button> renders fine at the app level.

Can you give an updated example for Vue-3?

[gago8910]

It seems to work! I investigate! And I try with vue and with vue3.

is it worked with vue3?

[jerosoler]

Update version to 0.0.50 new method for vue3 view https://github.com/jerosoler/Drawflow/issues/274#issuecomment-946454633