I have successfully designed a template using vue.js. Now, I am seeking to utilize this template in another HTML file by referencing its template Id.
For example, <div id="widgetId"></div>
The template Id is labeled as widgetId.
In this scenario, my goal is to generate embed code that showcases the template.
However, despite my efforts, I have not been able to achieve any output. Is there a method available to access the Vue template in another HTML file when implementing this embed code directly?
Below, you can find the code I am employing:
<script>
window.onload = function() {
var div = document.createElement('div');
div.className = 'widget-pos';
div.id = 'widget-posId';
document.body.appendChild(div);
var iframe = document.createElement('iframe');
iframe.id = 'widget-iframeId';
iframe.src = "javascript:false";
document.getElementById("widget-posId").appendChild(iframe);
document.getElementById('widget-iframeId').contentWindow.document.write("
<html><body><div id=widgetId></div></body></html>");
var iframeScript = document.createElement('script');
iframeScript.setAttribute("src", "/packs/main.js");
var Vuescript = document.createElement('script');
Vuescript.setAttribute('src',"//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js")
$("#widget-iframeId").contents().find("head").append(iframeScript);
$("#widget-iframeId").contents().find("head").append(Vuescript);
}
</script>