bootstrap-vue vuejs dynamic async component import

Question

I would like to import a single bootstrap component dynamically only when I need it.

Bellow syntax actually can do it but it does import all components.

So final module bundle after tree-shaking is 1.4MB (entire bootstrap library).

 BNavbar: () => import('bootstrap-vue').then(module => module.BNavbar),

How can I change it to import only navbar to be equivalent of

import { BNavbarPlugin } from 'bootstrap-vue'
Vue.use(BNavbarPlugin)

Answer 1

I think the solution is to wrap it in another component like AppNavbar which imports the BNavbarPlugin the basic way import { BNavbarPlugin } from 'bootstrap-vue' Then import your wrapper component dynamically

AppNavbar: () => import('@/components/AppNavbar')