Can I use mdb vue (Material Design Vue) along side with Bootstrap Vue ? What are the risks?

Question

I'm currently using Bootstrap v4.3.1 and Bootstrap Vue 2.1.0

Answer 1

You can do, but you will find a lot of issues such as:

1. Different design systems, your UI will look weird and the elements will not show consistency.
2. Some CSS properties will be overwritten between both libraries and components will show erratic behaviors.
3. More libraries mean that your users need to load more resources from your server, so the rendering time will be increased for things that with one library would be enough.

My advice, don't do it, save a lot of pain and pick one, if you need to customize styles you can try with tailwind.css that play wells with both libraries that you're mentioning.

Answer 2

You're loading more than you need to into your app. When you add Bootstrap Vue, the Bootstrap library is loaded along with it plus some additional contents specifically for Vue. Bootstrap-Vue requires the Bootstrap library to be added to your packages, but only Vue.use(BootstrapVue) (or whatever you import it as) is required.

Take a look at the documentation here: https://bootstrap-vue.js.org/docs

As for the risks, if you ever decide to re-write some themes or material designs, you could run into overwriting issues. At the least you're bloating your Vue.