April 7, 2022

Exploring FrontEnd UI Component Libraries

I used VueJS (verison 2) very successfuly on one of my WordPress project. I love the simplicity of it, and easy of use. It integrate well into existing project and allow you to use only what you need (I was able to add VueJS into PHP pages without having to build an entire FrontEnd NodeJS based project.) I even used couple of the Buefy UI components in my project very effectively. Buefy is a UI component library that combine the BulmaCSS and VueJS.

Today, VueJS is at version 3, however Buefy is still stuck on Vue2 without much of Vue3 support in progress. Searching around, it turns out there is an another project that now provide similar to Buefy, but with VueJS 3 support, and that is Oruga. Not only did Oruga provided this gap, it even went further to be CSS agnostic UI components library! You can use other CSS framework such as TailwindCSS or even Bootstrap!

There are also many other VueJS based UI libraries. Here I will list few I like and seems to have good potential:

  • Oruga (VueJS 2/3 with any CSS lib)
  • NaiveUI (VueJS 2/3 with custom CSS)
  • Buefy (VueJS 2 only with BulmaCSS)
  • Vuetify (VueJS 2 with Material Design CSS. NOTE: VueJS 3 support is work in progress!)
  • BootstrapVue (VueJS 2 with Bootstrap 4 CSS)

Also, checkout some these fantastic CSS Frameworks that I like:

  • BulmaCSS (no JavaScript locked in!)
  • TailwindCSS (a utility first CSS lib)
  • DaisyUI (TailwindCSS with built-in UI elements ready)
  • Bootstrap 4 (requires jQuery, Popper.js + it's own JS lib)
  • Bootstrap 5 (no more jQuery locked in, but it still requires Popper.js + it's own JS lib)
  • New.css (A small CSS framework without classes! It just style HTML elements directly!)