Currently, I am in the process of learning how to develop a straightforward VueJs Widget utilizing vue-custom-element within a basic HTML page to enable its usage wherever deemed necessary.
My approach involves incorporating it as shown below:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bacccfdf97d9cfc9ced5d797dfd6dfd7dfd4cefa899489948a">[email protected]</a>/dist/vue-custom-element.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>
<script>
Vue.customElement('test-widget', {
template: `<div>Hello World!</div>`
});
</script>
Unfortunately, upon attempting to load the page, I encountered 2 issues:
- Uncaught TypeError: window.Vue.use is not a function at vue-custom-element.min.js:6:9328
- Uncaught TypeError: Vue.customElement is not a function
I suspect there may be compatibility concerns at play, but I am uncertain. Therefore, any assistance provided in resolving this matter would be greatly appreciated. Just to reiterate, my objective is to have it functional on an HTML page rather than Vue CLI, so any alternative implementation suggestions are welcomed as well.