javascript - Vue.js: how to load a template inside an async component -

i'm brand new vuejs , i'm trying simple site set it. have component each page (about us, contact us, etc).

this working starting point

vue.component('about-us', {     template: '<div>...lots of markup...</div>' }); 

i want transform code works asynchronously. attempting follow docs, here code:

vue.component('about-us', function(resolve, reject){     let template_string = '';      // load template ajax     $.post(ajax_url, {'action': 'get_about_page'}, function(r){         r = json.parse(r);          // save template string         if( r.success ) {             template_string = r.data;         }     });      // resolve callback vue     resolve({         template: template_string     }); }); 

the error is:

[vue warn]: failed mount component: template or render function not defined. found in ---> anonymous root

question: approach wrong? syntax problem? i'm not sure if i'm on right path. (yes have jquery loaded)

you need move resolve ajax callback.

vue.component('about-us', function(resolve, reject){     // load template ajax     $.post(ajax_url, {'action': 'get_about_page'}, function(r){         r = json.parse(r);          // save template string         if( r.success ) {             // resolve callback vue             resolve({               template: r.data             });         } else {           reject("unable define component!")         }     }); });