[Vuejs]-Lazy loading with progress bar in Vue.js

by

0👍

There are two things you can do. First, have your own global progress-bar component somewhere on the page, preferably, near the top like Medium.com or Youtube.com. During route transitions, you can manually trigger its lifecycle – visibility, and animation. But I don’t recommend this approach unless you really need it.

The second approach is recommended. Create an Async component and use the official loading component flag to show the progress bar during the transition like this:

const AsyncComponent = () => ({
    // The component to load (should be a Promise)
    component: import('./MyComponent.vue'),
    // A component to use while the async component is loading
    loading: LoadingComponent,
    // A component to use if the load fails
    error: ErrorComponent,
    // Delay before showing the loading component. Default: 200ms.
    delay: 200,
    // The error component will be displayed if a timeout is
    // provided and exceeded. Default: Infinity.
    timeout: 3000
})

Read more about async component at Vue.js docs.

Leave a comment