Vue 3 Front End Frameworks

Mark Gavagan
4 min readAug 30, 2021
Vue logo

I’m a novice and this non-exhaustive list is to help me (and maybe others) consider various frameworks and other tech stack options for my new startup.

As of this writing, I’m only interested in technology compatible with Vue 3, which is the newest version of Vue and what I learned in my online classes and what I’ve already built much of Zagnetic with.

One thing I really like is the built-in tag validator available in Bootstrap Vue, BUT there’s no Vue 3 support…

Several StackOverflow answers say it’s easy to directly add Bootstrap to a Vue 3 project. Hmm…

Non-Material Design front-end frameworks

  • Tailwind UI — (same company as Tailwind CSS above) → 400+ fully responsive, expertly crafted component examples you can drop into your Tailwind projects + fully customize. Requires Vue 3. Pricing is $149 →$279
  • Headless UI — (same company as Tailwind CSS above) → “Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.” Versions for React or Vue (toggle at top).

Update: untethered to any framework, I found several tag input tutorials and code examples, including this one by @mayank-1513

  • WaveUI — I don’t care for some of the design choices, but it definitely has a robust selection of components and a Vue 3 version (“npm i wave-ui@next”)
Wave UI for Vue 3

Material Design front-end frameworks:

💡 LinkedIn sample page (need Pro subscription): https://mdbootstrap.com/docs/standard/lab/linkedin-homepage/

💡 “Vue Bootstrap UI KIT” page: https://mdbootstrap.com/docs/vue/

💡 Forms: https://mdbootstrap.com/docs/standard/forms/overview/

💡Grid system: https://mdbootstrap.com/docs/b5/vue/layout/grid/

💡more experimental projects: https://mdbootstrap.com/docs/standard/lab/

💡intro video: https://www.youtube.com/watch?v=sWfrs9EhC7M

  • Equal UI — open-source Vue 3 components system for your next project based on TypeScript
  • Quasar UI v2 — documentation for this version states “Quasar UI v2 is based on Vue 3.” Seems very robust, but a bit confusing to me. Also, this includes Cordova tech that translates a website into native mobile app code (iOS / Android). I’ve read a few bits of some reviews that are auite critical of Cordova.

Other (NOT Frameworks)

Frameworks that do NOT work with Vue 3, so they’re OUT

One thing I really like is the built-in tag validator available in Bootstrap Vue, BUT there’s no Vue 3 support…

  • Vuetifythe 2.x versions do not support Vue 3. Vuetify v3 “Titan” (currently in alpha) does support Vue 3 and might be in beta by the end of Q1 2021 (track progress here). Very comprehensive features & components!!!
  • Inkline — looks really nice and they are making really good progress and should release Vue 3 support soon, but right now they don’t…
  • Vuesax — another one that looks really good, but there’s virtually no momentum towards updating to Vue 3
  • Oruga — “Vue 3 version of Oruga (oruga-next) is “experimental” for various reasons. Use at your own risk!”
  • VueTailwind — this does not and will not support Vue 3. INSTEAD, a newly named and thus far not close to being production-ready version for Vue 3 is “Variant.js

Other tech

For cloud services (database, authorization, storing images, cloud functions, in-app messaging, hosting, etc.), I’ve already decided on Google Firebase. It’s what I’ve learned over the past year, in all the classes I’ve taken, and I’m sure it will be just fine.

--

--