'Vue.extend and $mount() alternative for a Vue3 repository

I am implementing Micro-Frontend Architecture in my Vue2 repo, where I made various web components and injected them in the parent repo named admin_portal.

After upgrading this repository from Vue2 to Vue3, I am stuck in a method where I use Vue.extend and $mount().

Attaching a method where I am facing this issue:

renderService(node) {
  const query = Object.keys(this.$route.query).length ?
    this.$route.query :
    "";
  const attrsString = `:token="accessToken" ${
        query ? ':search-params="params"' : ""
      }`;
  const ServiceClass = Vue.extend({
    template: `<${this.service.tagname} ${attrsString}></${this.service.tagname}>`,
    props: ["service", "params"]
  });
  const instance = new ServiceClass({
    propsData: {
      service: this.service,
      params: JSON.stringify(query)
    },
    name: this.service.tagname,
    store: this.$store,
    computed: {
      accessToken() {
        return this.$store.state.auth.user.token;
      }
    }
  });
  instance.$mount();
  if (node) {
    this.$refs.serviceContainer.replaceChild(instance.$el, node);
  } else {
    this.$refs.serviceContainer.appendChild(instance.$el);
  }
  this.instance = instance.$el;
},

Vue.extend & $mount() are deprecated in Vue3.

Attaching a documentation URL of Vue2 where the above code is still working. After my repo was upgraded from Vue2 to Vue3, I again want to implement the same kind of thing.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source