Vue: lazy loading from library (Bootstrap-Vue) inside a component

Question

I am exploring the lazy-loading feature and I'm trying to use it for Bootstrap-Vue component, but it does not work.

If I import the b-card "normally", it gets renderred correctly:

import { BCard } from 'bootstrap-vue';
export default {
    components: {
        BCard
    }
};

But when I'm attempting the 'lazy-load' syntax it does not work:

export default {
    components: {        
        BCard: () => import('bootstrap-vue').BCard
    }
};

The b-card component is not renderred, but no error is thrown and in Chrome's DOM inspection tools I can see that the placeholder <!----> is placed by Vue where the b-card component should be. I suspect that the library object that is loaded does not have the BCard property, but I don't know how else to access the library component with the 'lazy' syntax.

Is it possible to lazy-load a module from a library? How to do it?

Answer 1

When dynamically importing a module, you use the import keyword as a function and it returns a promise. So, to access the module component, you can use this syntax:

export default {
  components: {
    BCard: () => import('bootstrap-vue').then(module => module.BCard)
  }
}