Vue.js Aync Components with Loading Indicator

Book: Knigge für Softwarearchitekten

At the Vue.js Frankfurt Meetup I’ve presented the benefits and caveats of asynchronous Vue.js components.

For now, there are only some slides. I plan to extend it to a proper blog post soon.

Please see the link to the slides below.

To see other recorded videos, please visit my Vue.js Trainings and Talks page.

Here are the different situations you can experience and the possibily remedies I see.

Situation Behaviour Remedy
Component loads fast or already loaded, delay set to 0 Flickering Increase delay
Component loads slowly Loading screen appears after delay, then the component (works as designed)
Component fails to load after for example network error Error component shows; no retry will be issued on next rendering Provide link to user to reload application OR re-register component Vue.component(“comp”, c)
Timeout exceeded loading component Error component shows; late response will be ignored; no retry will be issued Don’t specify timeout OR re-register component as above
Speakerdeck slides of 'Vue.js - developer friendly, fast and versatile'
Back to overview...