Trying to incorporate a Vue.js component (@chenfengyuan/vue-qrcode) using UNPKG as CDN has been my focus.
The current setup is as follows:
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5422213114667a627a64">[email protected]</a>"></script>
<script src="https://unpkg.com/@chenfengyuan/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="166063733b676475797273562738263827">[email protected]</a>/dist/vue-qrcode.min.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>
<script type="module" src="/client.js"></script>
Within my client.js file, the Vue instance is defined as:
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
The desired setup would be something like this:
<script type="module" src="/client.js"></script>
Subsequently, the content of client.js would appear along these lines:
import Vue from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7701021237455941594647">[email protected]</a>/dist/vue.esm.browser.js'
import VueQrcode from 'https://unpkg.com/@chenfengyuan/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="413734246c3033222e252401706f716f70">[email protected]</a>/dist/vue-qrcode.min.js'
Vue.component(VueQrcode.name, VueQrcode);
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
The Vue template (embedded in HTML) appears as such:
<div id="app">
<h1>{{ msg }}</h1>
<qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"></qrcode>
</div>
Regrettably, this approach fails to work as intended. The console simply indicates that the custom tag is not being recognized. My goal with this method is to achieve complete separation between my Vue code and the HTML structure.
Can anyone offer guidance on why it's not functioning as expected? Any thoughts?