Simple JS function to dynamically load an HTML template for a VueJS component via AJAX

vuejs-load-ajax-template.js

/**
 * Registers a Vue component. Can take a `templateUrl` in the componentDef that is loaded and resolved to `template`
 * @param {string} name
 * @param {Object} componentDef
 */
function registerVueComponent(name, componentDef) {
    if (componentDef.templateUrl) {
        Vue.component(name, function (resolve, reject) {
            // retrieve the template via axios async call
            axios.get(componentDef.templateUrl)
                .then(function (response) {
                    // set the response.data to the component template
                    componentDef.template = response.data;
                    // delete the templateUrl property entirely
                    delete componentDef.templateUrl;
                    // resolve the promise and init the component
                    resolve(componentDef);
                })
                .catch(function (error) {
                    alert('Problem loading component');
                    reject(error);
                });
        });
    } else {  // if no templateUrl, just register normally
        Vue.component(name, componentDef);
    }
}