Nuxt Optimize BootstrapVue Size
March 9, 2020Edit 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";
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn