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>

Derek Pollard · Accepted Answer · 2018-08-20 18:48:21Z

4

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>

answered Aug 20, 2018 at 18:48

Derek Pollard

7,1856 gold badges45 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zero298 Over a year ago

I've been working with modules too much. This is a more backwards compatible way to do it. My way presumes the use of modules.

zero298 · Accepted Answer · 2018-08-20 18:52:10Z

2

You can use the module loader system, so use <script type="module" src="whatever.js"></script> and import in whatever.js:

From MDN <script>

module: HTML5 For HTML5-compliant browsers the code is treated as a JavaScript module. The processing of the script contents is not affected by the charset and defer attributes. For information on using module, see ES6 in Depth: Modules. Code may behave differently when the module keyword is used.

whatever.js

import Vue from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js";

import {
  VueButtonSpinner
} from "https://unpkg.com/[email protected]/dist/vue-button-spinner.js";

const app = new Vue({
  el: "#app",
  components: {
    "button-spinner": VueButtonSpinner
  }
});

edited Aug 20, 2018 at 18:52

answered Aug 20, 2018 at 18:39

zero298

27.1k10 gold badges80 silver badges109 bronze badges

Collectives™ on Stack Overflow

How to load external Vue components when I not use npm

2 Answers 2

1 Comment

whatever.js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

whatever.js

Comments

Your Answer

Sign up or log in

Post as a guest

Related