How to use Bootstrap SASS with VueJS.

Bootstrap and why it so Good and should I use it with Vue?

Bootstrap is a great CSS framework and has been dominating the CSS scene. The primary reason why bootstrap has been a great framework is the ability that it provides to not only designers but also to the developers to build UI faster.

Well I have been coding before all the popular frameworks started to appear and I too was looking for solutions that can make building the UI faster and better. And I was building my own CSS framework when the first version of Bootstrap arrived. It had all the features which I was building and more.

Moreover choosing a framework was natural choice since it could easily be taught and used as a team.

Primary reason of its huge scale success is its ability to build design in a more standard way and also minimizing the choices while you are building a design. For example previous to CSS frameworks we had to decide what width he columns should be kept and it was difficult. What I mostly did is research on the popular websites of that time and follow the pattern.

But once CSS frameworks with CSS Grid came they provided to choose a combination form 12 blocks. This made life easier also the page looked more aligned and looked so much better.

Vue JS again is a great front end library. What I loved most about it is its Options API, Single Page Components and loved it more because of its ability to simply be introduced in existing projects and then you can scale it up as much as you want.

Using bootstrap with VueJS is a great idea but once I have used Tailwind CSS its hard to go back to Bootstrap framework and I will strongly recommend it if you are going to start a new project. Tailwind is much more powerful and scalable than Bootstrap. And like me once you get a hand of it it would be difficult to get back to the Bootstrap.

But if you are already using Bootstrap in your current project then its a good idea to stick to it.

Bootstrap SaaS

Bootstrap SaaS is something which makes Bootstrap more customizable and you can tinker around with it to change fonts and colors, you can even update it completely different from what it looks as.

I usually use bootstrap SaaS to remove the components that I won’t be using, this helps my project lighter.

Moreover when you are using Bootstrap with VueJS you wont be using JavaScript based components such as dropdown, accordion, modal, carousel won’t work with VueJS out of the box. Well I won’t suggest that they be used that way. So its better to remove from SaaS the components which are not required.

For this very reason you could try a solution like boostrapVue it gives you components which you can directly in your project.

I personally do not like using these because it binds CSS directly in your project like Vuetify which particularly is not a very good idea to go about for a simple fact that all the projects end up looking identical and this for me makes the project look boring. (Just my opinion).

For this same reason I started writing my own basic components like modal, dropdown, tabs etc. which can play well with any framework may it be bootstrap, tailwind or just plain CSS. Still not a full fledged library but I love the concept and is superflexible. Its callled BraveVue.

Once I started building the library I also discovered that on the same concept there is another library which is available which is called headless UI by tailwind. You should definitely try it out.

How to start using Bootstrap in your VueJS Project

There are more than one way to use Bootstrap in your project, I basically export my projects as Web App so many times I do not load bootstrap from npm rather I just put the CSS files in the index.html and that the quickest and the fastest way to setup Bootstrap in my projects.

But if you are planning to use SasS along with the bootstrap you should install it using npm and then you can start using it.

npm install bootstrap --save

Then you can use boostrap Sass by including and customizing components as you wish. The following is the setup that I used for BraveVue Documentation. You can make your own customizations.

All you need to do is add Boostrap components to your style sass. Usually you would need to add it to your app.vue.

You can select the components that you need from the Bootstrap and make your own color customizations to it as you wish.

That’s it, If you are looking for developer to work along with you on a VueJS project or any interesting project or just want to say hi. Drop me an email at shishir.raven@gmail.com