Menu
I have used Vuejs for developing my frontend and now I have to style it. I came across Bootstrap-vue . Which will be better to use Bootstrap 4 or Bootstrap-vue. Are they same or is there is an advantage to use Bootstap-vue.
816
While Bootstrap is a responsive mobile-first framework with ready-made components and JS plugins, Vue is a reactive component framework that uses an API.
"Responsiveness", "UI components" and "Consistent" are the key factors why developers consider Bootstrap; whereas "Simple and easy to start with", "Good documentation" and "Components" are the primary reasons why Vue. js is favored.
With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue. js and the world's most popular front-end CSS library — Bootstrap v4.
😲 Now that Bootstrap 5 components are written as vanilla JS plugins, you get improved alignment with Vue's best patterns & practices. This also means it's possible to use Bootstrap 5 components without the need for a 3rd party library like bootstrap-vue.
Some Bootstrap 4 functions require jQuery, Popper.js, and these functions will conflict with Vue. (These functions modify the DOM directly. Vue won't keep track of these modifications. Any changes made using jQuery could be overwritten by Vue.) Bootstrap-vue converted most of these functions into Vue, so that it works as expected.
With the best practices, Bootstrap can have a lower fully loading time of 2.1 seconds of a page size that is 1.3 MB. How does Vue stand out in terms of performance?
While there are many under the hood changes such as a new logo for Bootstrap, move to Hugo from Jekyll, we will touch upon those aspects first that affect web development projects most. As with any major version change, a lot has changed in Bootstrap 5 over Bootstrap 4.
There's a note on the project roadmap that the "Primary goal of the team is to rewrite bootstrap-vue to support Vue 3 and Bootstrap v5. We will do this in a separate repository.". Unfortunately, it appears that further progress has likely been delayed by current events - one of the developers is Ukrainian.
Some Bootstrap 4 functions require jQuery, Popper.js, and these functions will conflict with Vue. (These functions modify the DOM directly. Vue won't keep track of these modifications. Any changes made using jQuery could be overwritten by Vue.)
These functions include:
Bootstrap-vue converted most of these functions into Vue, so that it works as expected.
If you only want to use Bootstrap CSS and not its JS related functions, using Bootstrap 4 directly will be more straight forward and requires less time spent learning how Bootstrap-vue works.
Else, use Bootstrap-vue.
If you are not sure, Bootstrap-vue seems like a less risky choice.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
