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 :
npm install --save-dev bootstrap less less-loader
And include the LESS file in
npm install --save-dev bootstrap-sass node-sass sass-loader
And include the SASS file in
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 :
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.
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).
Vue.js components resources
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-vueprovides Bootstrap 4 components (2/2/2017: Boostrap v4 is still in Alpha release)
- Bulma is a CSS framework
vue-strapare Bootstrap Vue.js components (2/2/2017: still on its way to Vue.js 2.x)
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.