'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 |
|---|
