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

April 12, 2022

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.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.