Tutorial: How to add Bootstrap 4 (with customizations) to Vue.js
Last updated: August 18th 2017 (minor style tweaks and upgrade to latest Bootstrap version)
This is a small tutorial on how to add Bootstrap 4 (with customizations) to Vue.js apps.
This is aimed at Webpack users and targets the Beta version of Bootstrap (https://getbootstrap.com/).
This tutorial does not cover anything jQuery related. If you do want rapid out-of-the box JS functionality I recommend https://bootstrap-vue.js.org/ which is a Vue wrapper for Bootstrap and is 100% compatible with this tutorial.
npm install email@example.com --save --dev
Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
npm install node-sass --save --dev
Install sass-loader for Webpack
Loads SASS/SCSS and compiles it to CSS.
npm install sass-loader --save --dev
Adapt your Webpack configuration
Update existing rule: add the sass-loader to the .vue$ rule:
Create a new rule for .scss$
Import bootstrap.scss file in entry component
This will usually be called App.vue.
Any future bootstrap-specific customization should be declared before this import
That’s it for the integration part, at this point you should be able to add vanilla-looking Bootstrap components to your application.
Create your customization file
You don’t need to declare your customization in a separate file, but let’s not clutter our Vue component unnecessarily.
I created a ‘custom-bootstrap.scss’ file (you can name it anything you want) with the following contents:
Importing your customization file
Now it’s just a matter off importing the file.
Please do make sure the new import is added before the bootstrap.scss file!
Final implementation (with HTML)
In case you get stuck you can get the full code on github here: https://github.com/Botre/make-bootstrap-sexy-again
That’s all folks
Hope this was helpful. Feedback of any kind is always appreciated, don’t be shy!