Optimize BootstrapVue/Bootstrap Bundle Size (JavaScript and CSS) for Nuxt

April 13, 2022

Nuxt Config

Edit nuxt.config.js

Disable bootstrapCSS and bootstrapVueCSS
Selectively load icons you want to use only
Selectively load commonly used plugins/components only, where we will load other plugins manually when necessary

const config = {
  css: [
    '~/assets/styles/bootstrap.scss',
    // '~/assets/styles/app.scss'
  ],
  modules: [
    'bootstrap-vue/nuxt',
  ],
  bootstrapVue: {
    // icons: false,
    bootstrapCSS: false,
    bootstrapVueCSS: false,
    components: ['BSkeleton', 'BSkeletonImg', 'BIconSearch', 'BIconGeoAlt', 'BIconThreeDotsVertical', 'BIconTagFill', 'BIconArrowLeft'],
    // components: [],
    componentPlugins: [
      // 'AlertPlugin',
      'BadgePlugin', 
      'BreadcrumbPlugin',
      'ButtonPlugin', 
      'CardPlugin',
      // 'FormPlugin', 
      // 'FormCheckboxPlugin',
      // 'FormDatepickerPlugin',
      // 'FormGroupPlugin',
      // 'FormInputPlugin',
      // 'FormSelectPlugin', 
      // 'FormTagsPlugin',
      // 'FormTextareaPlugin',
      'ImagePlugin', 
      //'InputGroupPlugin', 
      'LayoutPlugin', 
      'LinkPlugin', 
      //'ListGroupPlugin',
      'MediaPlugin',
      //'ModalPlugin',
      'NavbarPlugin',
      //'OverlayPlugin',
      //'PaginationPlugin', 
      //'PaginationNavPlugin',
      //'SkeletonPlugin', // cause full icons being loaded
      //'SpinnerPlugin', 
      //'TablePlugin',
      //'ToastPlugin',
    ],
    directivePlugins: []
  },
}

CSS

Install SCSS support for Nuxt.

npm install --save-dev sass sass-loader@10 fibers

Create assets/styles/bootstrap.scss.

remove components which are not used
we will move componnets which are less commonly used into another scss file, and load them when necessary

// @import "node_modules/bootstrap/scss/bootstrap";

// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

$breadcrumb-bg: #FAFAFA;

// @import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
// @import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
//** @import "node_modules/bootstrap/scss/tables";
// @import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/buttons";
//**
// @import "node_modules/bootstrap/scss/transitions";
// @import "node_modules/bootstrap/scss/dropdown";
// @import "node_modules/bootstrap/scss/button-group";
// @import "node_modules/bootstrap/scss/input-group";
//**
// @import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/nav";
@import "node_modules/bootstrap/scss/navbar";
@import "node_modules/bootstrap/scss/card";
@import "node_modules/bootstrap/scss/breadcrumb";
// @import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/badge";
// @import "node_modules/bootstrap/scss/jumbotron";
@import "node_modules/bootstrap/scss/alert";
// @import "node_modules/bootstrap/scss/progress";
@import "node_modules/bootstrap/scss/media";
//**@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/close";
//**
// @import "node_modules/bootstrap/scss/toasts";
// @import "node_modules/bootstrap/scss/modal";
// @import "node_modules/bootstrap/scss/tooltip";
// @import "node_modules/bootstrap/scss/popover";
// @import "node_modules/bootstrap/scss/carousel";
//**
// @import "node_modules/bootstrap/scss/spinners";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/print";

// @import 'node_modules/bootstrap-vue/src/index.scss';


// Include variables and utilities first
@import "node_modules/bootstrap-vue/src/variables";
@import "node_modules/bootstrap-vue/src/utilities";

// General styling needed for special form controls
// @import "node_modules/bootstrap-vue/src/custom-controls";

// Include custom SCSS for components
// @import "node_modules/bootstrap-vue/src/components/index";
// @import "node_modules/bootstrap-vue/src/components/avatar/index";
// @import "node_modules/bootstrap-vue/src/components/calendar/index";
@import "node_modules/bootstrap-vue/src/components/card/index";
// @import "node_modules/bootstrap-vue/src/components/dropdown/index";
// @import "node_modules/bootstrap-vue/src/components/form-checkbox/index";
// @import "node_modules/bootstrap-vue/src/components/form-datepicker/index";
// @import "node_modules/bootstrap-vue/src/components/form-file/index";
// @import "node_modules/bootstrap-vue/src/components/form-input/index";
// @import "node_modules/bootstrap-vue/src/components/form-radio/index";
// @import "node_modules/bootstrap-vue/src/components/form-rating/index";
// @import "node_modules/bootstrap-vue/src/components/form-spinbutton/index";
// @import "node_modules/bootstrap-vue/src/components/form-tags/index";
// @import "node_modules/bootstrap-vue/src/components/form-timepicker/index";
// @import "node_modules/bootstrap-vue/src/components/input-group/index";
@import "node_modules/bootstrap-vue/src/components/media/index";
// @import "node_modules/bootstrap-vue/src/components/modal/index";
@import "node_modules/bootstrap-vue/src/components/nav/index";
@import "node_modules/bootstrap-vue/src/components/navbar/index";
// @import "node_modules/bootstrap-vue/src/components/pagination-nav/index";
// @import "node_modules/bootstrap-vue/src/components/pagination/index";
// @import "node_modules/bootstrap-vue/src/components/popover/index";
// @import "node_modules/bootstrap-vue/src/components/sidebar/index";
@import "node_modules/bootstrap-vue/src/components/skeleton/index";
//** @import "node_modules/bootstrap-vue/src/components/table/index";
// @import "node_modules/bootstrap-vue/src/components/time/index";
// @import "node_modules/bootstrap-vue/src/components/toast/index";
// @import "node_modules/bootstrap-vue/src/components/tooltip/index";


// Include custom SCSS for icons
@import "node_modules/bootstrap-vue/src/icons/index";

I created another console.scss styles which is only required at admin pages.

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/tables";


@import "node_modules/bootstrap-vue/src/variables";
@import "node_modules/bootstrap-vue/src/utilities";

@import "node_modules/bootstrap-vue/src/components/table/index";

I created another user.scss styles which is only required when user login.

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

@import "node_modules/bootstrap/scss/transitions";
@import "node_modules/bootstrap/scss/dropdown";
// @import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/input-group";

@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/modal";
@import "node_modules/bootstrap/scss/toasts";
@import "node_modules/bootstrap/scss/spinners";


@import "node_modules/bootstrap-vue/src/variables";
@import "node_modules/bootstrap-vue/src/utilities";

@import "node_modules/bootstrap-vue/src/components/dropdown/index";
@import "node_modules/bootstrap-vue/src/components/input-group/index";

@import "node_modules/bootstrap-vue/src/custom-controls";
@import "node_modules/bootstrap-vue/src/components/calendar/index";
@import "node_modules/bootstrap-vue/src/components/form-checkbox/index";
@import "node_modules/bootstrap-vue/src/components/form-datepicker/index";
@import "node_modules/bootstrap-vue/src/components/form-input/index";
@import "node_modules/bootstrap-vue/src/components/form-radio/index";
@import "node_modules/bootstrap-vue/src/components/form-tags/index";

@import "node_modules/bootstrap-vue/src/components/modal/index";
@import "node_modules/bootstrap-vue/src/components/toast/index";

Usage - Selectively load SCSS and Plugins

For admin pages

I can also put these code in nuxt layout and create a custom layout for admin
I load certain plugins and styles for admin pages only

<script>
import Vue from 'vue'
import { ModalPlugin, OverlayPlugin, ToastPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)
Vue.use(OverlayPlugin)
Vue.use(ToastPlugin)

export default {
  async mounted() {

  }
}  
</script>

<style lang="scss">
@import '~assets/styles/user';
@import '~assets/styles/console';
</style>

You can also include certain plugins and styles in a component, and only load them dynamically when necessary (such as when user click a button or signin).

Refer BootstrapVue Load Modal JavaScript Dynamically Only When Shown (Nuxt).

I watch currentUser changes in nuxt layout and load user.scss whenever user is sign in.

<script>
export default {
  data() {
    userStyleLoaded: false
  },
  watch: {
    currentUser: async function(newUser, oldUser) {
      if (newUser && !this.userStyleLoaded) {
        await import('~/assets/styles/user.scss')
        this.userStyleLoaded = true
      } 
    }
  },
}
</script>

Refer [Nuxt Sign-in With Firebase Auth V9 Modular With FirebaseUI]

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager