BootstrapVue Modal Lazy Load / Dynamic Load Content (Reduce Bundle Size) in Nuxt.js

I wanted to reduce the bundle size of the JavaScript, not loading/bundle the content component/javascript before the b-model is shown.

• By default b-modal might be lazy loaded (I think it means the content DOM is not rendered), but the JavaScript of the content component is still pre-loaded.
• To dynamically load the JavaScript of the content component, the b-model need to have v-if="false" as initial state.
• The content component should be lazy loaded (I am using Nuxt, so just adding a lazy prefix to the component is enough)

With above implementation, the JavaScript of my-component-form is dynamically loaded only when b-modal is shown.

<template>  <client-only>    <b-modal v-model="linkModal" size="lg" title="Link" :no-close-on-backdrop="true" @ok="saveLink" style="z-index:2;" :body-class="linkModalBusy ? 'position-static' : ''" v-if="linkModal">      <b-overlay :show="linkModalBusy" no-wrap></b-overlay>      <lazy-my-component-form ref="linkForm" :item="link" />    </b-modal>  </client-only></template><script>export default {  data() {    return {      linkModal: false,      linkModalBusy: false,      link: {}    }  },  methods: {    showLinkModal() {      this.linkModal = true    },    showLinkModalBusy() {      this.linkModalBusy = true    }  }}</script>

With the above implementation, even though my-component-form code is dynamically loaded, I still need to pre-load b-modal even when b-modal is never shown. If I want to load b-modal javascript only when b-modalis shown, refer to BootstrapVue Load Modal JavaScript Only When Shown.