Presently, I am in the process of developing a third-party application where Vue.js is being utilized to render components.
In this setup, the third-party app loads the component dynamically after the Vue app has been initialized and mounted. Due to this approach, I can only view the HTML structure of the component, not the actual template intended for rendering. Essentially, what I see when inspecting is something like
<my-component></my-component>myComponent template.
An example illustrating this challenge can be found here: https://jsfiddle.net/EmeraldCodeNinja/31jkmzgc/12/. In this demo, clicking on a button appends a Vue component to the DOM using JavaScript.
I would appreciate suggestions on how to make this dynamic component rendering work effectively.
It's worth noting that the objective isn't to troubleshoot the JSFiddle example but rather to address the issue of dynamically rendering the added Vue component.
Provided below are the same HTML and JS snippets from the JSFiddle:
HTML
<script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
<div id="app">
<sample-button></sample-button>
<div id="new-button-wrap"></div>
</div>
<script id="sample-button" type="text/html">
<button @click="addNew">Add Another Sample Button</button>
</script>
JS
const app = Vue.createApp();
app.component('sample-button', {
template: '#sample-button',
setup() {
const addNew = function() {
var div = document.createElement('div');
var sampleBtn = document.createElement('sample-button');
div.textContent = 'here a button should appear, but instead a tag is appearing';
div.appendChild(sampleBtn);
document.querySelector('#new-button-wrap').appendChild(div);
}
return {
addNew
}
}
})
app.mount('#app');