How to load external Vue components when I not use npm

Question

How to load external Vue components when I not use npm? I got this error message:

ReferenceError: VueButtonSpinner is not defined

  Vue.use(VueButtonSpinner);
  var vm = new Vue({
      delimiters: ['[[', ']]'],
      el: '#test',
      data: {
        isLoading: false,
        status: ''
      },
      components: {
        VueButtonSpinner
      },
      methods: {
      	send() {
        console.log("ypyoyoyoy");
        this.isLoading = true;
        }
      },
  });

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script src="https://unpkg.com/[email protected]/dist/vue-button-spinner.js"></script>

<div id="test">
<button-spinner
     @click="send"
    :isLoading="isLoading" 
    :disabled="isLoading"
    :status="status">
    <span>Submit</span>
</button-spinner>
</div>

Answer 1

This should work. The trick is that the script gets imported, but the code defaults to the default attribute inside of window['vue-button-spinner']:

Vue.component('button-spinner', window['vue-button-spinner'].default);

var vx = new Vue({
  // delimiters: ['[[', ']]'],
  el: '#test',
  data() {
    return {
      isLoading: false,
      status: ''
    };
  },
  methods: {
    send() {
      console.log("ypyoyoyoy");
      this.isLoading = true;
    }
  },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script src="https://unpkg.com/[email protected]/dist/vue-button-spinner.js"></script>

<div id="test">
  <button-spinner
       @click.native="send"
      :is-loading="isLoading" 
      :disabled="isLoading"
      :status="status">
      <span>Submit</span>
  </button-spinner>
</div>