Vue 3 Front End Frameworks
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 CSS → Don’t confuse this with “Tailwind UI” (related) or “VueTailwind” (separate company) below → live Tailwind sandbox → article on how to setup in Vue → Official docs on installation → Docs: responsive design → May 2020 video: build a twitter clone in vue and tailwind → detailed article: “Getting Started with Tailwind in Vue” → July 2020 Tailwind CSS tutorial by The Net Ninja → July 2021 Just in time tutorial by The Net Ninja → Quick “How to Setup Vue 3 with Tailwind CSS via the Vue CLI” video (install not needed, per pinned comment) → official tutorial playlist: “Tailwind CSS: From Zero to Production” →
- 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).
- Naive UI — They have DYNAMIC TAGS which may be very useful! Their GitHub has 5,400 stars
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”)
- Ant Design Vue — It’s a little weird at first because when their site first loads, it has both English and Chinese characters. Click the “English” on the upper-right and everything displays only in English. This one has a good file upload interface (with thumbnails), and 15k stars on GitHub, but I don’t like all their designs.
- BootstrapVue 3 — “early (but lovely) implementation of Vue 3, Bootstrap 5 and Typescript” → NOT PRODUCTION READY (still in alpha). See their “Comparision with BoostrapVue” and GitHub repo.
- SuperBVue — this is a “Bootstrap v5 UI component and grid system available for Vue v3” BUT it only has 9 stars on GitHub (why?)
- Vuestic — Some nice aspects and many components, BUT I don’t really like a some of their design choices, so... “Fully Vue.js 3 compatible” GitHub
Material Design front-end frameworks:
- MDBootstrap’s “Material Design for Bootstrap 5 & Vue 3” — free, with most better components requiring a pro subscription, starting at $99 per year. GitHub
💡 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
- BootstrapVue — really nice and flexible Bootstrap designs, but sadly, there’s very little momentum towards updating it to Vue 3
One thing I really like is the built-in tag validator available in Bootstrap Vue, BUT there’s no Vue 3 support…
- Vuetify — the 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.
