Nuxt Optimize BootstrapVue Size

Edit nuxt.config.js.

export default {  css: [    '~/assets/styles/app.scss'  ],  modules: [    'bootstrap-vue/nuxt',  ],  bootstrapVue: {    bootstrapCSS: false, // Or `css: false`    bootstrapVueCSS: false, // Or `bvCSS: false`    componentPlugins: ['NavbarPlugin'],    directivePlugins: [],    components: [],    directives: []  },}

NOTE: I am using Navbar component only, and Bootstrap Layout/Grid and Utilities. Check available plugins.

If you are using Bootstrap SCSS Theming, remember to remove CSS import.

Edit assets/styles/app.scss

  • You can selectively import scss file
/** * Bootstrap - 4.4.1 */// @import 'bootstrap/scss/bootstrap';// Required@import "~bootstrap/scss/functions";@import "~bootstrap/scss/variables";@import "~bootstrap/scss/mixins";// Optional@import "~bootstrap/scss/root";@import "~bootstrap/scss/reboot";@import "~bootstrap/scss/type";@import "~bootstrap/scss/images";// @import "~bootstrap/scss/code";@import "~bootstrap/scss/grid";// @import "~bootstrap/scss/tables";// @import "~bootstrap/scss/forms";@import "~bootstrap/scss/buttons";@import "~bootstrap/scss/transitions";@import "~bootstrap/scss/dropdown";// @import "~bootstrap/scss/button-group";// @import "~bootstrap/scss/input-group";// @import "~bootstrap/scss/custom-forms";@import "~bootstrap/scss/nav";@import "~bootstrap/scss/navbar";@import "~bootstrap/scss/card";// @import "bootstrap/scss/breadcrumb";@import "~bootstrap/scss/pagination";@import "~bootstrap/scss/badge";// @import "bootstrap/scss/jumbotron";@import "~bootstrap/scss/alert";// @import "bootstrap/scss/progress";// @import "bootstrap/scss/media";// @import "bootstrap/scss/list-group";@import "~bootstrap/scss/close";// @import "bootstrap/scss/toasts";// @import "bootstrap/scss/modal";// @import "~bootstrap/scss/tooltip";// @import "~bootstrap/scss/popover";// @import "bootstrap/scss/carousel";// @import "bootstrap/scss/spinners";@import "~bootstrap/scss/utilities";// @import "bootstrap/scss/print";/** * BootstrapVue - 2.4.0 */// @import '~bootstrap-vue/src/index.scss';// Include variables and utilities first@import "~bootstrap-vue/src/variables";@import "~bootstrap-vue/src/utilities";// Include custom SCSS for components// @import "~bootstrap-vue/src/components/index";@import "~bootstrap-vue/src/components/card/index";@import "~bootstrap-vue/src/components/dropdown/index";// @import "~bootstrap-vue/src/components/form-checkbox/index";// @import "~bootstrap-vue/src/components/form-file/index";// @import "~bootstrap-vue/src/components/form-input/index";// @import "~bootstrap-vue/src/components/form-radio/index";// @import "~bootstrap-vue/src/components/form-tags/index";// @import "~bootstrap-vue/src/components/input-group/index";// @import "~bootstrap-vue/src/components/modal/index";@import "~bootstrap-vue/src/components/nav/index";@import "~bootstrap-vue/src/components/navbar/index";@import "~bootstrap-vue/src/components/pagination/index";@import "~bootstrap-vue/src/components/pagination-nav/index";// @import "~bootstrap-vue/src/components/popover/index";// @import "~bootstrap-vue/src/components/table/index";// @import "~bootstrap-vue/src/components/toast/index";// @import "~bootstrap-vue/src/components/tooltip/index";// Include custom SCSS for icons// Temporary until Bootstrap v5 (maybe)// @import "~bootstrap-vue/src/icons/index";

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.