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.

Install Bootstrap

npm install bootstrap@4.0.0-beta --save --dev

Install Node-sass

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

2 actions:

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)

Github

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!