Why I Don't Like Vuetify V3 (vs Bootstrap)

Dec 28, 2022

Vuetify Cons (v3.0.6)

  • V3 Documentation is incomplete as of December 2022. I found Bootstrap and BootstrapVue documentation quality is much better when compared to Vuetify 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), while Bootstrap 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 like v-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 not Vuetify'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 any BootstrapVue 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.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.