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

Question

I'm brand new to vuejs and I'm trying to get a simple site set up with it. I have a component for each page (About us, Contact us, etc).

This is my working starting point

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

I want to transform that code into something that works asynchronously. Attempting to follow the docs, here is my code:

Vue.component('about-us', function(resolve, reject){
    let template_string = '';

    // Load the template with ajax
    $.post(ajax_url, {'action': 'get_about_page'}, function(r){
        r = JSON.parse(r);

        // Save the template string
        if( r.success ) {
            template_string = r.data;
        }
    });

    // Resolve callback for Vue
    resolve({
        template: template_string
    });
});

The error I get is:

[Vue warn]: Failed to mount component: template or render function not defined. found in ---> Anonymous Root

Question: Is my approach wrong? Is it a syntax problem? I'm not sure if I'm on the right path. (yes I have jQuery loaded)

Put the resolve call in the callback: if (r.success) { resolve({ template: r.data }) } — thanksd
– thanksd, Commented Jul 25, 2017 at 19:36

Bert · Accepted Answer · 2017-07-25 19:38:13Z

1

You need to move your resolve into the ajax callback.

Vue.component('about-us', function(resolve, reject){
    // Load the template with ajax
    $.post(ajax_url, {'action': 'get_about_page'}, function(r){
        r = JSON.parse(r);

        // Save the template string
        if( r.success ) {
            // Resolve callback for Vue
            resolve({
              template: r.data
            });
        } else {
          reject("Unable to define component!")
        }
    });
});

answered Jul 25, 2017 at 19:38

Bert

82.6k17 gold badges204 silver badges166 bronze badges

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

Comments

user6748331 · Accepted Answer · 2017-07-25 20:11:44Z

0

Im using this construction_

Vue.component('about-us', function (resolve, reject) {
  $.post('ajax_url', {'action': 'get_about_page'}, 'html')
   .done(function (data) {
     resolve({template: data})
   })
})

answered Jul 25, 2017 at 20:11

user6748331

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related