Nuxt Optimize BootstrapVue Size

March 9, 2020

Edit nuxt.config.js.

Enable Tree shaking
Setup SCSS

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 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

By Desmond Lua

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

Tags: