DEV Community

Discussion on: vue.js modules in the browser, the cheap way

View post

Replies for: Interesting idea! Thank you for sharing this. Just a few JS advice. (You might lose a little bit of browser support, but since you are using objec...

Collapse
 
magnusmanske profile image
Magnus Manske • • Edited

Thanks! This is what it looks like in proper ES6 (some parts omitted):

let vue_components = {
    loadComponents : function ( components ) {
        return Promise.all ( components.map ( component => this.loadComponent(component) ) ) ;
    } ,
    loadComponent ( component ) {
        let id = this.getComponentID ( component ) ;
        if ( $('#'+id).length > 0 ) return Promise.resolve(42) ; // Already loaded/loading
        $('body').append($("
").attr({id:id}).css({display:'none'}));
        return fetch ( this.getComponentURL(component) )
            .then ( (response) => response.text() )
            .then ( (html) => $('#'+id).html(html) )
    }
}



I tried to get rid of jQuery, but document.getElementById("content").innerHTML = html doesn't seem to work for some reason, even though it does set the HTML. But I need jQuery for the larger project anyway, so that's OK...