Using Vue in tool development?

[butaminas]

I was wondering if anyone had some experiences or ideas on how could Vue be used for custom tool development?

I know there is a Vue wrapper for editor.js, but it's just a wrapper and I'm not looking for that, I'm looking to develop a custom tool that could utilize the reactivity of Vue.

[Neophen]

you can achieve this by doing something like this:

import CustomBlock from './CustomBlock.vue';
const ComponentCtor = Vue.extend(CustomBlock);

class SimpleImage {
  constructor({ data }: ImageProps) {
    this.data = data;
    this.wrapper = null;
  }

  static get toolbox() {
  // see the getting started tutorial;
  }

  render() {
    this.wrapper = document.createElement('div');
    this.wrapper.id = 'custom-id';
    // this you can use this like any other vue component.
    this.component = new ComponentCtor({
      propsData: this.data,
    });
    this.component.$mount('#custom-id');
    return this.wrapper;
  }

  save(blockContent) {
   // in the component have a function that returns the required data.
    return this.component.getData();
  }

  validate(savedData) {
    if (!savedData.url.trim()) {
      return false;
    }

    return true;
  }
}

i hope this is enough to get you started.

[Devin345458]

I ended up doing the following

render() {
        this.wrapper = document.createElement('div');
        this.wrapper.id = 'custom-id';
        // this you can use this like any other vue component.
        this.component = new ComponentCtor({
            propsData: {
                filetypes: []
            },
        });
        this.component.$mount();
        return this.wrapper.appendChild(this.component.$el);
}

[cannap]

any know a way to access the current vue instance in the class maybe pass it via config or is there a other way? i use nuxt i dont have a way to import or export vue itself

//e found a other way i will make a config callback which is calling in the initalizer component then i will pass my data back

[luckyboy07]

Is there any work around for this in the vue 3?

[bettysteger]

@luckyboy07 sorry for my late answer, i just did this in vue 3 using my own custom vue 3 component: (you need render and h from 'vue')

https://gist.github.com/bettysteger/d7f2b1a52bb1c23a0c24f3a9ff5832d9

[luckyboy07]

@bettysteger Thank you so much, I will definitely try this one.