Why does Vue not initialize when loaded via a script-loader?

406 views Asked by At

I need to load VueJS dynamically using a script loader but I'm unable to understand why Vue doesn't initialize.

Here's my simple script-loader:

(function( w ){
    var loadJS = function( src, cb ){
        "use strict";
        var ref = w.document.getElementsByTagName( "script" )[ 0 ];
        var script = w.document.createElement( "script" );
        script.src = src;
        script.async = true;
        ref.parentNode.insertBefore( script, ref );
        if (cb && typeof(cb) === "function") {
            script.onload = cb;
        }
        return script;
    };
    // commonjs
    if( typeof module !== "undefined" ){
        module.exports = loadJS;
    }
    else {
        w.loadJS = loadJS;
    }
}( typeof global !== "undefined" ? global : this ));

In the browser console, I invoke the script-loader using this:

loadJS('https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js')

I can see VueJS being requested in the network panel, but typing Vue into the console gives me Uncaught ReferenceError: Vue is not defined error.

I'm able to load other libs using the same script loader but not Vue. I'm baffled.

0

There are 0 answers