We use Vuetify where I work. Kinda rough with Vuetify's v3 lacking features but hey, at least it is out now lol. Some day we may be able to upgrade to Vue 3 lol.I use Quasar and Vue 3 on my personal projects. I've looked at and tried tailwind in the past and... My god the class names look like a mess. You can make prebuilt combinations of their classes to ease that a bit but their documentation actually said (at the time, no idea if it still does) you shouldn't do that... As devs we spend far more time reading & maintaining code rather than writing it. I personally don't like it at all. I know some love it though.
Why aren't more people talking about primevue? I'm interested in using it for my next project but there isn't much hype about it and I'm not sure why. I have done projects with vuetify and quasar, and have had great experiences with both, but especially quasar 😊
after learning react js, I'm back at Nuxt3 js and I'm 100% going to use vuetify version 3 for my 2 projects. I'm so thrilled cause of it. thank you erik for making such great contents around vuejs. I have learned a ton so far. so thank you again for being a great mentor.
Vuetify 3 is ASS. Even the second version was nowhere near MUI but they really dropped the ball with v3. It's been months it's out and still not all the components are transferred from v2. Plus the docs are horribly unfinished. You just have to guess what each prop is supposed to do. Not to mention the final rendered DOM is a huge mess. I'd say explore framework agnostic component libraries and mix them with whatever CSS framework you're comfortable with.
I went from vuetify to quasar, and for now it's no regrets, lighter, more responsive. may be a little less aesthetic, but for management applications it is not the most important
The accessibility is my main reason for using component libraries, with best practices being in second place. These are two things that I'm either not good at or haven't worked on. I know for a fact that I don't think the same way most other people do.
With a component framework... Good news: Your app will have a well designed consistent UI. Bad news: Your app will look just like a thousand other apps. If you do all your own CSS and components... Good news: Your app will have exactly the UI that *you* want. Bad news: Everybody else will think your app is weird and fugly.
I understand that this clarifies a lot about the pros and cons. I am fairly new to programming and Vue at the moment, and I am having a hard time deciding what to use. I have just finished a basic Vue tutorial and now feel overwhelmed by the wide range of possibilities. My main goal is to create an application that works on both tablets and PCs. It will be for a sports team where I can create profiles and keep track of their performance. I would like to display the records in a dashboard-style format. Initially, I was almost convinced that I should use Vitesse (which uses UnoCSS, similar to Tailwind, I believe), as you mentioned in another video. However, I am now considering whether Quasar or Vuetify would be better options. Any help you can provide would be greatly appreciated.
@@ProgramWithErik I guess I will try that starter template then. Seems like you dont have to use unocss there and can just write plain css with the option later to try that
Vuetify also has a treeshaking functionnality, which can be activated automatically. So this an argument to remove from being opposite with Qasar. About integration with mobile, it is also possible with vuetify, you only need to install the dependancy Cordova or Capacitor, which is not a hassle by itself. I am not sponsored in any way by Vuetify, I am here just to illustrate that some 'major differences' between frameworks might not be as huge as some web articles might say (probably sponsored by the way). Your video is great by the way. Thanks Erik!
I am surprized you didn't mention how much component libraries can complicate the build process. They can make build times much slower (or alternatively make page loads slower, depending on how you ingest your component library). I have a couple projects that my team refuses to update, because we used an old component library and it would be too much effort to figure out how to update the build chain in a way to use newer component libraries, without sacrificing page load times. (we have one project using Vuetify 2 and one using an ancient version of Bootstrap)
tailwind + vite/vue or tailwind + nuxt for bigger projects. Have 2 apps in prod running vuetify 2; will be refactoring to remove the dependency on vuetify. Not only it's the crappy material ui, but their release of v3 took forever.
Vuetify 2 was great but as of today I would stop using it. The reason you mentioned: The development is to slow. Instead of tailwind, you could take a look on UnoCSS. Its the same as Tailwind but faster
PrimeVue should not be left out ... They've made great improvements in the last 2 months. Through 2021-2022 they were a much better choice for Vue 3 than Vuetify. Quasars tooling has been loaded with bugs and poor quality legacy Node code and a very bad culture that shunned ESM up to 2022, last time I checked.
I had to use it differently depending on the trends of the development project and the technical type of the members. I personally like the customizability of Primevue. However, in projects with a small number of front engineers, the coding speed is significantly reduced. So in such cases, vuetify or quasar are the best candidates. Unfortunately, vuetify3 is not yet fully compatible with Vue3, so I am in two minds about updating my Vue2 project.
Vuetify is hard to customize as it is made for vue itself, after 2 years of working with vue and vuetify I can tell if the project is made by it by just seing the UI.
Vite is a very pure stamdards focused JavaScript project that runs EVERYWHERE. Quasar breaks if you look at it wrong... Try running it in StackBlitz, Cloudflare Workers, in ESM mode without legacy compatibility hacks, with the latest version of TS sub path export patterns, Bun.js, even on Replit it'll have issues with E2E. It's not a robust framework made by a diverse visionary team like Vite.
Can you explain why? Quasar works with sass variables, and it has many CSS utility classes like Tailwind. I would only need TW if i need a specific class that Quasar doesn't have. Unless you are talking about the Tailwind's pseudo selectors!? 🔥🤯🤩 Ok I agree with you now.
@@Tarabass pretty stable. helped me a lot when we ventured into PWAs. But vuetify has been keeping up with the updates on v3. But look at the components ready for Quasar. Pretty fascinating. Out of the box you get, Notify, Confirm Dialogs, Date Pickers and File Uploaders.
Do you use component frameworks?
Yes, Erik, I use component frameworks. Mainly Quasar & Vuetify ...
Quasar
We use Vuetify where I work. Kinda rough with Vuetify's v3 lacking features but hey, at least it is out now lol. Some day we may be able to upgrade to Vue 3 lol.I use Quasar and Vue 3 on my personal projects.
I've looked at and tried tailwind in the past and... My god the class names look like a mess. You can make prebuilt combinations of their classes to ease that a bit but their documentation actually said (at the time, no idea if it still does) you shouldn't do that... As devs we spend far more time reading & maintaining code rather than writing it. I personally don't like it at all. I know some love it though.
Quasar!
yes, quasar for 4 enterprise projects
Quasar is great. I highly recommend it. I used Vuetify before that but I prefer Quasar after having used both for over a year each.
Quasar is the best Vue Component Library out there !
Agreed 💯👍🏻
Why aren't more people talking about primevue? I'm interested in using it for my next project but there isn't much hype about it and I'm not sure why. I have done projects with vuetify and quasar, and have had great experiences with both, but especially quasar 😊
after learning react js, I'm back at Nuxt3 js and I'm 100% going to use vuetify version 3 for my 2 projects.
I'm so thrilled cause of it.
thank you erik for making such great contents around vuejs.
I have learned a ton so far. so thank you again for being a great mentor.
You are welcome!
Vuetify 3 is ASS. Even the second version was nowhere near MUI but they really dropped the ball with v3. It's been months it's out and still not all the components are transferred from v2. Plus the docs are horribly unfinished. You just have to guess what each prop is supposed to do. Not to mention the final rendered DOM is a huge mess. I'd say explore framework agnostic component libraries and mix them with whatever CSS framework you're comfortable with.
better just jump straight to the full packet: Quasar
Quasar is the best vue framework I've ever used.
It's a good one!
THE BEST!
Super best
I went from vuetify to quasar, and for now it's no regrets, lighter, more responsive. may be a little less aesthetic, but for management applications it is not the most important
Me too.. Qusar is awesome
After working with React MUI, Vuetify, Blazor, MudBlazor and eversince I worked in Quasar I never went with anything else.
quasar ftw
The accessibility is my main reason for using component libraries, with best practices being in second place. These are two things that I'm either not good at or haven't worked on. I know for a fact that I don't think the same way most other people do.
With a component framework...
Good news: Your app will have a well designed consistent UI.
Bad news: Your app will look just like a thousand other apps.
If you do all your own CSS and components...
Good news: Your app will have exactly the UI that *you* want.
Bad news: Everybody else will think your app is weird and fugly.
hahah!🤣
Quasar is my favorite.
Work for most cases.
Quick to deliver a product.
I understand that this clarifies a lot about the pros and cons. I am fairly new to programming and Vue at the moment, and I am having a hard time deciding what to use. I have just finished a basic Vue tutorial and now feel overwhelmed by the wide range of possibilities. My main goal is to create an application that works on both tablets and PCs. It will be for a sports team where I can create profiles and keep track of their performance. I would like to display the records in a dashboard-style format.
Initially, I was almost convinced that I should use Vitesse (which uses UnoCSS, similar to Tailwind, I believe), as you mentioned in another video. However, I am now considering whether Quasar or Vuetify would be better options.
Any help you can provide would be greatly appreciated.
If you don't have a time constraint, you might just want to use something simple like just plain old CSS. You'll learn a lot on how to use VUe.
@@ProgramWithErik I guess I will try that starter template then. Seems like you dont have to use unocss there and can just write plain css with the option later to try that
We use Quasar. (About 50,000 monthly active users, of the web app)
Do you still use quasar, and is it still good?
Thanks for this vid !
Gonna be a great help for a lot of devs, even "seniors" ...
Thanks !
My pick was PrimeFaces. (PrimeVue)
Vuetify also has a treeshaking functionnality, which can be activated automatically. So this an argument to remove from being opposite with Qasar. About integration with mobile, it is also possible with vuetify, you only need to install the dependancy Cordova or Capacitor, which is not a hassle by itself. I am not sponsored in any way by Vuetify, I am here just to illustrate that some 'major differences' between frameworks might not be as huge as some web articles might say (probably sponsored by the way). Your video is great by the way. Thanks Erik!
So ultimately which one would you go with? Of the ones you mentioned it seemed like quasar was the safest choice given maturity.
I really like Amplify UI framework, Quasar and Vuetify
@@ProgramWithErikpolitics 😅
I am surprized you didn't mention how much component libraries can complicate the build process. They can make build times much slower (or alternatively make page loads slower, depending on how you ingest your component library). I have a couple projects that my team refuses to update, because we used an old component library and it would be too much effort to figure out how to update the build chain in a way to use newer component libraries, without sacrificing page load times. (we have one project using Vuetify 2 and one using an ancient version of Bootstrap)
tailwind + vite/vue or tailwind + nuxt for bigger projects. Have 2 apps in prod running vuetify 2; will be refactoring to remove the dependency on vuetify. Not only it's the crappy material ui, but their release of v3 took forever.
Vuetify 2 was great but as of today I would stop using it. The reason you mentioned: The development is to slow. Instead of tailwind, you could take a look on UnoCSS. Its the same as Tailwind but faster
PrimeVue should not be left out ... They've made great improvements in the last 2 months. Through 2021-2022 they were a much better choice for Vue 3 than Vuetify. Quasars tooling has been loaded with bugs and poor quality legacy Node code and a very bad culture that shunned ESM up to 2022, last time I checked.
What type of bugs are you getting with Quasar tooling?
I had to use it differently depending on the trends of the development project and the technical type of the members.
I personally like the customizability of Primevue.
However, in projects with a small number of front engineers, the coding speed is significantly reduced.
So in such cases, vuetify or quasar are the best candidates.
Unfortunately, vuetify3 is not yet fully compatible with Vue3, so I am in two minds about updating my Vue2 project.
primevue + tailwind?
what do you think about unocss? made by antfu
It's on my list to do a quick video on!
The title is misleading. This video is an advertisement of Amplify UI.
Vuetify is hard to customize as it is made for vue itself, after 2 years of working with vue and vuetify I can tell if the project is made by it by just seing the UI.
great video!
Amplify doesn't have UI components for Vue except Authenticator
True! I wanted to add it to the video so everyone knows more about it. And I'm sure plenty of non Vue developers watch this channel
Unpopular opinion : ithink each app should have it's own design system
Forgot PrimeVue again 🤦🏻♂️
Quasar + Vite + UnoCSS = ❤
I need to try out this UnoCSS
Vite is a very pure stamdards focused JavaScript project that runs EVERYWHERE. Quasar breaks if you look at it wrong... Try running it in StackBlitz, Cloudflare Workers, in ESM mode without legacy compatibility hacks, with the latest version of TS sub path export patterns, Bun.js, even on Replit it'll have issues with E2E. It's not a robust framework made by a diverse visionary team like Vite.
I have to plan migration from windicss to uno
Last time I tried Vuetify the docs were so horrible that even though I spent 4 days building my site with it, I decided to rewrite everything.
That can happen.
Same bro
Wilderman Causeway
Vuetify for me, the data tables are awesome and necessary for me
How do you like it?
I'm confused. Quasar has data table and its way better than Vuetify's.
@@angelhdzdev because i am already using Nuxt, Quasar and Nuxt don’t play well together, yet
..so this is actually a video about AmplifyUI...
It is a bit. You got me
@@ProgramWithErik 😀
hear me out: Tailwind + Quasar = ♥
Is there a framework for this?
No need for another framework.. Quasar works really well with Tailwind
Can you explain why? Quasar works with sass variables, and it has many CSS utility classes like Tailwind.
I would only need TW if i need a specific class that Quasar doesn't have.
Unless you are talking about the Tailwind's pseudo selectors!? 🔥🤯🤩
Ok I agree with you now.
UnoCss + daisyUI
tailwind all the way
PrimeVue
quasar ftw. lost all hope to vuetify
Why? I'm in the position to make a decision about which tools/framework we are going to use for a new crud application..
@@Tarabass pretty stable. helped me a lot when we ventured into PWAs.
But vuetify has been keeping up with the updates on v3.
But look at the components ready for Quasar. Pretty fascinating. Out of the box you get, Notify, Confirm Dialogs, Date Pickers and File Uploaders.