Using Bootstrap with Vue.js


Bootstrap contains CSS and JS files. CSS can be used without JS, but the other way round makes no sense.

Use Bootstrap CSS with Vue.js

This is easy. In a “classic” setup (no module bundler) just include the <link> tag, as usual.

If you are using the Webpack template, you may use LESS or SASS, depending on your preference :

LESS version

npm install --save-dev bootstrap less less-loader

And include the LESS file in src/main.js

require('../node_modules/bootstrap/less/bootstrap.less')

SASS version

npm install --save-dev bootstrap-sass node-sass sass-loader

And include the SASS file in src/main.js

require('../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss')

Use Bootstrap JS with Vue.js

Now this is fairly more complex and calls for other questions.

Do I really need Bootstrap ?

In most cases the answer is no. Bootstrap’s JS is based on jQuery, and jQuery is probably not needed either. I won’t describe here how to install Bootstrap JS because it just doesn’t feel right. There are alternatives and using a global JS components library is not really the way you should be thinking when working with a component-based framework such as Vue.js

What do I need Bootstrap for ?

One thing that comes often is I like the way it looks and I already know its API. If this is the main reason you want to stick with Bootstrap, it’s a good time to get out of your comfort zone. Bootstrap JS is not meant for you anymore, you have in your hands a powerful framework surrounded by a rich ecosystem, just use it.

Most people don’t use each and every Bootstrap JS components available. So you could start by listing the components you need, and find an alternative. Here are a few ideas of place where you may find what you need :

ElementUI

Very nice-looking, complete library. It is mostly a UI framework, but components can be used separately. Check out its website, includes a showcase of every component.

Very professionnal looking, and a nice guide. Native language is chinese.

Bulma

Bulma is another UI library. This one is more an alternative to Bootstrap but @fundon has been working on Vue.js components that come ready-to-go.

Check out vue-bulma project page on Github. It also contains this sweet Admin template for Vue.js named vue-admin.

Find the vue-xxx version of your favorite library

The good thing about component-based framework is, well there are components available out there that don’t require you to write any code (beside including the component obviously).

Most big projects have their vue-xxx version available out there. Amongst the ones I use regularly, there are vue-moment and vue-cleave that come in very handy and simple to use.

Vue.js components resources

I like to check out Vue.js newsletter, Twitter and the awesome-vue repository for the freshest updates.

If you know websites dedicated to Vue.js components, please post it in the comments.

Nothing found ? Just code it

You may not have found the component you are looking for. In the case of Bootstrap component, most of them are fairly easy to do yourself.

I found myself coding an autocomplete component and it was surprinsingly easy. Its code is not relevant and now outdated but start considering the component you need and think how you would do it if you had to code it yourself.

If it seems easy enough, just do it ! It may end up more complicated than planned but well, you’ll learn on the way.

  • bootstrap-vue provides Bootstrap 4 components (2/2/2017: Boostrap v4 is still in Alpha release)
  • Bulma is a CSS framework
  • vue-strap are Bootstrap Vue.js components (2/2/2017: still on its way to Vue.js 2.x)

Feedback

If you are still going to include Bootstrap JS in your app, please tell me why in the comments.

This content may become outdated or irrelevant so please let me know so that I can update it.

Latest posts

Use Vue.js to create custom web components

Include Vue.js components in any HTML/JS application

Use a global event bus instead of a state manager

Emit and listen to events across every Vue components of your app

Vue.js Component Style Guide

General purpose recommandations for writing Vue.js components code

How to use Docker containers for Vue.js applications

Get started with Docker and Vue.js

Hide elements during loading using "v-cloak"

You probably need this directive and didn't know it

Build, test and deploy your Vue.js app easily with Gitlab

Introduction to Continuous Integration using free Gitlab tools

Another way to declare Vuex modules

`vuex-module` provides a syntax to write your store modules' state, actions, getters, etc. You may want to use it.

Simple state management, simpler than Vuex

Vue Stash makes it easy to share reactive data between components. An alternative to Vuex.

Hybrid Vue.js app in Cordova : desktop or mobile ?

A simple hack to know if the code is executed in a website or in the Cordova version of your app

Does Vue.js require jQuery ?

No it doesn't. But you might find it useful, here's why.