- Learn by example
Make an RPG
Vue Implementations

Example of how to use Async Components

You might want to use an async component in order to load it conditionally. For example, if you have a large section of dashboard that only gets loaded in specialized circumstances. Let's see an example of that. Notice: We Pass the component definition to the resolve callback.

var getDashboard = function( callback ) { callback('<div>complex dashboard</div>'); }; Vue.component('dashboard', function (resolve, reject) { getDashboard(function ( dashboard ) { resolve({ template: dashboard }); }); })

In reality, getDashboard would make some AJAX call to your server to retrieve the dashboard and pass it to the callback, instead of our simplified stub: complex dashboard.

You can either call resolve or reject, depending on the success of your render. Perhaps, if the data passed back from the server, you might want to call reject.

There's also a number of async loading options available using Promise and import statements but those will require Webpack2 and ES2015, covered in a later tutorial.

In the next lesson, we will learn about Example of how to use Custom Directives

Get the Latest Tutorial Updates
<< >>