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

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 [email protected] 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