Vue check when async component has loaded

Question

I am wondering how to check when an async component has loaded.

Normally I would load my component like so:

Vue.component(
     'booking-overlay', 
     () => import('@/components/BookingOverlayAsync.vue')
);

Using something like this does not work:

Vue.component(
   'booking-overlay',
    () => import('@/components/BookingOverlayAsync.vue').then(() => {
        console.log('component has loaded');
    })
);

It leads to the following error:

Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined at ensureCtor..

The component no longer loads but the promise does resolve though. By adding the then it no longer resolves the promise itself it seems.

How can I globally register this async component and also check when this components chunk of JavaScript has been loaded?

Obviously I could simply do this together with setting the global component:

import('@/components/BookingOverlayAsync.vue').then(() => {
    console.log('Chunk loaded');
});

This just seems like a very ugly solution though.

Can you show the code of targeted vue component you are going to load asynchronously — Deng Zhebin
– Deng Zhebin, Commented Oct 19, 2018 at 8:31

Deng Zhebin · Accepted Answer · 2018-10-19 08:39:32Z

5

Because your second promise object returned by .then function doesn't continue to hand down the async loaded component to vue lib itself.

the Vue.component function expects that the second parameter should be a function that returns a promise where the resolved data must be the async-loaded component itself.

please try following:

Vue.component(
        'booking-overlay',
        () => import('@/components/BookingOverlayAsync.vue').then(component => {
            console.log('component has loaded');
            return component;
        })
    );

answered Oct 19, 2018 at 8:39

Deng Zhebin

1,2621 gold badge10 silver badges17 bronze badges

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

1 Comment

Stephan-v Over a year ago

That was a lot more obvious than I thought it would be. It works now. Thanks for your help.

Collectives™ on Stack Overflow

Vue check when async component has loaded

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related