.consulting .solutions .partnership Async Vue.js Components with loading indicator and error handler Alexander Schwartz, Principal IT Consultant Vue.js Frankfurt Meetup, 2019-05-06 

Async Vue.js Components with loading indicator and error handler © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 2 Idea and Concept 1 Live Demo 2 Benefits and Caveats 3 

Idea and Concept Idea and Concept © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 3 Problem 1: Your application is big and starts slow in the browser Solution 1: Use Webpack code splitting to load components only when needed Problem 2: When the user visits the part of the application for the first time, there is a delay, and loading might fail Solution 2: Show a placeholder while loading, and an error message if loading fails 

Vue.component( 'async-webpack-example', // The `import` function // returns a Promise. () => import('./MyComponent.vue') ) Idea and Concept 1. https://vuejs.org/v2/guide/components-dynamic-async.html Async Components Step 1 © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 4 • Webpack will split the code, and load the chunk from the server as needed • Vue.js will create the component when it is first used Still missing: Error handling, load indicator 

const AsyncComponent = () => ({ component: import('./MyComponent.vue'), loading: LoadingComponent, error: ErrorComponent, // for loading component. Default 200ms delay: 100, // for error component. Default Infinity timeout: 3000 }) Vue.component( 'async-webpack-example', AsyncComponent ) Idea and Concept 1. https://vuejs.org/v2/guide/components-dynamic-async.html Async Components Step 2 © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 5 • Vue.js will set timeouts for the alternative components 

Async Vue.js Components with loading indicator and error handler © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 6 Idea and Concept 1 Live Demo 2 Benefits and Caveats 3 

Live Demo © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 7 Source: https://github.com/ahus1/vue-async-timeout DEMO 

Async Vue.js Components with loading indicator and error handler © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 8 Idea and Concept 1 Live Demo 2 Benefits and Caveats 3 

Benefits and Caveats Benefits and Caveats © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 9 Situation Behaviour Remedy Component loads fast or already loaded, delay set to 0 Flickering Increase delay 

Benefits and Caveats Benefits and Caveats © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 10 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) 

Benefits and Caveats Benefits and Caveats © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 11 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) 

Benefits and Caveats Benefits and Caveats © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 12 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 

Benefits and Caveats Benefits and Caveats © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 13 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 

Benefits and Caveats Further Reading © msg | May 2019 | Async Vue.js Components | Alexander Schwartz 14 Vue.js dynamic and async components https://vuejs.org/v2/guide/components-dynamic-async.html Lazy Loading with Vue Router https://router.vuejs.org/guide/advanced/lazy-loading.html Example by @chrisfritz – see lazyLoadView() at end of file https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/router/routes.js @ahus1de 

.consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171 5625767 [email protected] msg systems ag Mergenthalerallee 73-75, 65760 Eschborn Deutschland www.msg.group