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?

steve16351 · Accepted Answer · 2020-04-19 19:52:10Z

2

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)
  }
}

answered Apr 19, 2020 at 19:52

steve16351

5,8572 gold badges21 silver badges33 bronze badges

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

1 Comment

Eggon Over a year ago

Thanks! That works indeed! I tried logging result from then - () => import('bootstrap-vue').then(module => {console.log(module)}) to verify if promise shennanigans are at play here, but for some reason it didn't seem to work. At least I was close. Thanks again! :)

Collectives™ on Stack Overflow

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

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