title: How to import Vue components from browser - via CDN
body: <p>I'm trying to import a Vue.js component (<a href="https://www.npmjs.com/package/@chenfengyuan/vue-qrcode" rel="nofollow noreferrer">@chenfengyuan/vue-qrcode</a>) using UNPKG as CDN. </p>
  
  <p>Currently, my setup works like this:</p>
  
  <pre><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/@chenfengyuan/vue-qrcode@1.0.1/dist/vue-qrcode.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;Vue.component(VueQrcode.name, VueQrcode);&lt;/script&gt;
  
  &lt;script type="module" src="/client.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><br/>
  In my <code>client.js</code> file I have my Vue instance:</p>
  
  <pre><code>new Vue({
    el: "#app",
    data: {
      msg: "Vue js Hello World - Your First Vue.js App"
    }
  });
  </code></pre>
  
  <p>The setup that I would like to achieve is something like this:</p>
  
  <pre><code>&lt;script type="module" src="/client.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Then my <code>client.js</code> would look something like this:</p>
  
  <pre><code>import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
  
  import VueQrcode from 'https://unpkg.com/@chenfengyuan/vue-qrcode@1.0.1/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"
    }
  });
  </code></pre>
  
  <p>The Vue template (incrustated in HTML) is the following:</p>
  
  <pre><code>&lt;div id="app"&gt;
        &lt;h1&gt;{{ msg }}&lt;/h1&gt;
        &lt;qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"&gt;&lt;/qrcode&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br/>
  But sadly, this approach does not work. All I see in the console is that the custom tag is not recognized. With this approach, I want to achieve full separation of my Vue code from the HTML. </p>
  
  <p>Any hints why it's not working as I want? What do you think?</p>