Vuetify Cons (v3.0.6)
- V3 Documentation is incomplete as of December 2022. I found
Bootstrap
andBootstrapVue
documentation quality is much better when compared toVuetify V2/V3
. - There is no official Nuxt integration documentation for Vuetify V3.
Vuetify
seems like more suited for Mobile App/Web App development (Since Material Design is originally an Android App design langiage), whileBootstrap
is more suited for website (blog, news, static content, etc.). For example, v-pagination doesn't have an actual link for each pagination button (not suited for static website), only pagination button with events (for Application). I also notice Vuetify layout component likev-app-bar
doesn't render well with just HTML and CSS, as it depends on JavaScript to style it's view (notice layout movement until the JavaScript is ready).Vuetify
component is less customizable. I try to extend v-pagination, where I reuse the syles. Probably notVuetify
's fault, as extending Vue V3's component is not well supported as compared to Vue V2. Having said that, I have yet need to extend anyBootstrapVue
component, as I feel it is more feature complete (or just more suited for website).
NOTE: My view may be biased as I am a long time Bootstrap
users and only toyed with Vuetify
for about 1 week.
Web Score
One of the issue with using a CSS Framework like Vuetify
or BootsrapVue
is you will usually have lower PageSpeed or Lighthouse score because the framework is heavy with reset, theme, utility, grid and color CSS, on top of components JavaScript and CSS. These things increase CSS/JavaScript download size, thus affecting Total Blocking Time.
To have lightweight CSS and JavaScript, the best options is probably Tailwind CSS, which is just utility CSS. Since it doesn't come with components, you have to write your own or buy from Tailwind UI. Another good things is their JIT capability, which only generate/include CSS which you actually use. So this option is suited if you don't need many components, like for a blog.
If more components is required, I will probably opt for Bootstrap v5. Without BootstrapVue
(Bootstrap v5 could be integrate quite easily with Vue), the codebase is much smaller now. You can optimize it further to reduce unecessary CSS and JavaScript. Besides, Bootstrap's documentation and component quality is top notch.