I use the same stack in my latest projects; it's a very good stack! I'm on Quasar tho, building components is time consuming and Quasar is really good.
I think a huge mistake that was made early on, is that instead of providing quick support for Vue3 and refactor later, these projects opted for huge code rewrites. I feel like this decision was so unhealthy for the community. On the other hand HeadlessUI from Tailwind was created only for Vue3 in mind and the difference between React and Vue(only 3) weekly download is huuuuge.
I really prefer the idea of just using a plain css theme like BulmaCSS for styling. Having a lot of classes in my elements for just styling/layout purposes is not my way. Because it's always a nightmare to align anything to proposed designs (including responsive), UI frameworks aren't so flexible in that aspect.
I'm "happy" to see that you recommend none of quasar/vuetify for the UI Library since I find a bit to heavy. Still, I'm curious, I'm quite often limited when I need some tailwind component with a bit of logic(like date picker), how do you handle this?
Great video! I came upon this when I was planning on the set up of my second vue 3 app. The first one I went with vite over vue-cli but I was wondering how you handle unit testing, because vite depends on Vitest, does it not? I've had some major issues with Vitest and testing-library/vue. They don't seem to play nice. Do you have a video on just setting up unit testing for vue 3?
for me the options API is just better looking, i hate seeing methods to be large as can setup be... also a dealbreaker for me in Vue CLI is no server side rendering, and nuxt 3 is still beta, so for now nuxt using vue 2 is my way, but sooner or later i will need to update my stack
Vite-SSG (available with Vitesse) is a good-enough alternative if you still want to work with Vue3. Also, if your setup is super long, it's probably lacking some composables/structure. At the end, you have more freedom but you need to use it wisely because Options API can be pretty messy too (it is more messy actually).
"methods" aren't any larger in script setup than in options API though? Also the code in total is almost always going to be much smaller in script setup than in options API. So, im just not sure I see what you're saying
composition API offers better DX imo, tried and play tested with options API in vue 3 and the DX still the same as before. Even in vue 2 I prefer composition API due to better DX.
Wow. Great video! Very good recommendations, even for newbie Vue devs. Your opinion on this stack seems to be built on a lot of experience. Thank you for sharing this.
Newbie question: What's better....this recommended stack or just going with Nuxt 3? Yes, I know that's a rather broad question with tons of "well that depends" caveats, so don't flame me too bad.
I really enjoyed giving Vite a try, but I came across an issue where the hot reload did not work. So I had to manually restart Vite in the console anytime I made a change, which is a deal-breaker for me.
I'm not a fan of Tailwind, since it is based on CSS classes, and there is virtually no control over what you can type there. I personally loved the way that material-ui in React did a Box component that allows for passing margins and paddings as props. Also things like display: flex, etc. Typed propes have the adventage that I know my options there (like 'display' union type tells me that it accepts 'block', 'flex', etc.) CSS classes on the other hand, are not typed, so you can type there the biggest nonsense and it won't tell you it's wrong. I was hoping that there is a similar way of doing that in Vue, but looks like styled-components are the only option to achieve that (I'm not counting passing props to 'style' binding, because that is savage).
So, what if I just started with Vue 3 vanilla and want to migrate to any of these? I'm new when it comes to JavaScript frameworks, but not new when it comes to programming (just old).
Nuxt is still in beta, will probably be dope once totally finalized and production-ready, especially since it will just use all of what is listed in this video, on top of SSR + QoL features baked-in.
@@kissu_io Yes Nuxt 3 is in Beta, but you can still use Nuxt 2. I was just curious why Eric didn't mention it in the video, and what his thoughts are on it.
Hi Erik, do you know if you can make mobile apps using Vue? Or is there anything in the works for creating mobile apps using Vue? Lastly, I am shopping around for a library and I am deciding whether I should choose Vue or React. What makes Vue user friendly for new developers. I have only been learning JavaScript HTML and CSS now for 4 months and feel ready to learn a library. I could strongly use your guidance, thank you.
Hey Erik, love your videos man! Keep them up! Had a Telegram conversation with Evan You yesterday and he recommended naive-ui for vue 3. Would love to hear your thoughts about it
Do you know of any "good" libraries that wrap MSAL and work well with Vue 3? By the way, I've been using script setup and like it a lot. Thanks for all the other recommendations.
So helpful! Quick question, if someone were to start learning Vue 3, and they got a job at a company that has existing Vue 2 projects, would they be able to understand and maintain them?
Options API and Composition API is not the same. Meanwhile, you can totally use Options API with Vue3. IMO, learning Options API first is still the way to go because it's easier.
I did not try Vue3 yet, so it's difficult to say is faster or not. But I can say that according to the documentation looks like the new composition API requires writing more code to achieve the same result and I definitely do not like that.
I don't think you are correct. Vuex is the recommended state management tool for Vue. Do you have a source that says that the crew recommends Pinia instead?
By reading about it I feel like they now go in both directions at the same time. My guess is that they will merge them back into Vuex in the end. We will see. You channel is great Erik. Only thumbs up from me. 👍
nice , but iam new to vite so can someone show me how to emit inside a function , when you are using cli you can say 'this' , but in vite it doesn't work.
this might be my opinion (or just small, short-sighted conclusion), but I can say, at least in my team reaaally don't like bringing class system into their javascript code. When I ask why, they said that it feels rigid and imposing (in addition, it gave them vibes of coding in university back then; and they don't like it for some reason).
Tbh, I feel like classes are almost redundant in JS when you can create and work with objects directly as opposed to languages like C#, Java, C++ etc. where you have to instantiate classes in order to work with objects.
I would change title to ..best vue stack for pet projects and landings. Or list of most hype technologies. vue-test-utils - has a lot of problems vite - also doesn't ready for big production what about ssr with vue 3? file based routing - in my opinion the worst thing that exists in nuxt script step brings too much magic tailwind - reinvention of inline css with style attribute
The worst about composition API - it's hard to read. Every developer make his own structure and instead of easy-reading on options API components - you have to read spaghetti code.
@@ProgramWithErik Me - yes 🙂What's about other developers in the team ? :-) If some framework/language allow you to do sh*t - be sure you'll see it everywhere ;-) I can't compare or select which API is better - Options or Composition - They're for different purposes :-)
I don't know why you would even consider using Vue2 or even mention it. Vue3 is better than Vue2 in every way. Same with Vite and VueCLI. You don't even need to mention it, it's obvious.
The composition API is the future. Libraries and frameworks that don't build on the composition API are going to go the way of the dinosaurs. Either VUE keeps pushing forward progressively or it will become another dead development platform. Angular is struggling for this exact reason.. If you don't progress in today's day and age and tech leaves you behind... Nortel, Nokia, Blackberry... 2 Years ago Quasar was by far the most complete front-end development platform for Vue... Unfortunately it is developed by only 1 person and it is falling far behind despite being one of the first to incorporate VUE3....
Want to learn more about Vue? I have a six module course on it here! bit.ly/2OETt0M
sometimes i am sad that i only can give one Like to a video :(....thanks for this, awesome video!!
"than", not "then". One of the most common mistake in English.
Thanks for the video.
Setup:
- Vue 3
- Vite
- Composition API with Setup Script
- Vue Router(Next)
- Cypress , @testing-library/vue
- Vitesse (starter template)
- No component library
- Volar VSCode Extension
I use the same stack in my latest projects; it's a very good stack!
I'm on Quasar tho, building components is time consuming and Quasar is really good.
im still bummed that vuetify is still not actually released for vue3, only as nightlies...
I think a huge mistake that was made early on, is that instead of providing quick support for Vue3 and refactor later, these projects opted for huge code rewrites. I feel like this decision was so unhealthy for the community. On the other hand HeadlessUI from Tailwind was created only for Vue3 in mind and the difference between React and Vue(only 3) weekly download is huuuuge.
For now, I'd always recommend Vue 3 + Composition API + TS
I was confuuuused before this video, but you answered my exact questions. Such a great video, thank you!
I use the same tools except testing. I only do small projects and feel having a full testing stack is not necessary.
My favorite channel for Vue
Thank you for guiding me into the best Vue stack!
Congrats on the 100K, Erik!
Thank you!
I really prefer the idea of just using a plain css theme like BulmaCSS for styling. Having a lot of classes in my elements for just styling/layout purposes is not my way. Because it's always a nightmare to align anything to proposed designs (including responsive), UI frameworks aren't so flexible in that aspect.
I'm "happy" to see that you recommend none of quasar/vuetify for the UI Library since I find a bit to heavy. Still, I'm curious, I'm quite often limited when I need some tailwind component with a bit of logic(like date picker), how do you handle this?
This is a great video! A lot of things have evolved.
Great video as always
Great video! I came upon this when I was planning on the set up of my second vue 3 app. The first one I went with vite over vue-cli but I was wondering how you handle unit testing, because vite depends on Vitest, does it not? I've had some major issues with Vitest and testing-library/vue. They don't seem to play nice. Do you have a video on just setting up unit testing for vue 3?
Just found it, ruclips.net/video/FJRuG85tXV0/видео.html
Wow Erick really amazin video, thanks for sharing
Can you do a video on Clean Architecture (Uncle Bob) with Vue/Nuxt?
Thanks for the video.
Looks like it's time to update the knowledge
Thanks for the recommendations
Always great up to date content. Thanks.
for me the options API is just better looking, i hate seeing methods to be large as can setup be... also a dealbreaker for me in Vue CLI is no server side rendering, and nuxt 3 is still beta, so for now nuxt using vue 2 is my way, but sooner or later i will need to update my stack
Vite-SSG (available with Vitesse) is a good-enough alternative if you still want to work with Vue3.
Also, if your setup is super long, it's probably lacking some composables/structure. At the end, you have more freedom but you need to use it wisely because Options API can be pretty messy too (it is more messy actually).
"methods" aren't any larger in script setup than in options API though? Also the code in total is almost always going to be much smaller in script setup than in options API. So, im just not sure I see what you're saying
composition API offers better DX imo, tried and play tested with options API in vue 3 and the DX still the same as before.
Even in vue 2 I prefer composition API due to better DX.
Amazing content, ty Erik!
Wow. Great video! Very good recommendations, even for newbie Vue devs. Your opinion on this stack seems to be built on a lot of experience. Thank you for sharing this.
Newbie question: What's better....this recommended stack or just going with Nuxt 3?
Yes, I know that's a rather broad question with tons of "well that depends" caveats, so don't flame me too bad.
Nice work Erik. This is great info 👌
Eric, the first thing that came to my mind as I played this video was the soundtrack you used. Reminds me of Veritasium🥹
Please guide how to setup PWA using VITE with VUE.
I'll look into it!
I really enjoyed giving Vite a try, but I came across an issue where the hot reload did not work. So I had to manually restart Vite in the console anytime I made a change, which is a deal-breaker for me.
thank you Erik,it's helpful.
You're welcome!
thannks
Perfect timing
Thanks)) To much a new info) I have still used V2))
Nice video. Would really be interested in your oppion regarding Nuxt. Is it worth the extra setup and dependencies?
It's probably not stable enough (yet), but coming soon!
Hi, thank you! What about ts vs. js in relation to vue?
I use TS all the time in Vue 3, that's the way to go honestly. The whole industry is going that way.
What about styling? Do you prefer CSS/SCSS, or maybe styled-components or something else?
SCSS
Vanilla Tailwind is still the best IMO, no need for more.
I'm not a fan of Tailwind, since it is based on CSS classes, and there is virtually no control over what you can type there. I personally loved the way that material-ui in React did a Box component that allows for passing margins and paddings as props. Also things like display: flex, etc. Typed propes have the adventage that I know my options there (like 'display' union type tells me that it accepts 'block', 'flex', etc.) CSS classes on the other hand, are not typed, so you can type there the biggest nonsense and it won't tell you it's wrong. I was hoping that there is a similar way of doing that in Vue, but looks like styled-components are the only option to achieve that (I'm not counting passing props to 'style' binding, because that is savage).
Those slides look great, did you design them or are they a template?
Template thanks!
Vuetify not being ready is why I haven't switched to Vue 3 yet. Big bummer.
TailwindCSS
🎉Great video Erik! Helps me keep up to date with the Vue ecosystem. Would you recommend `vitetest` for vite-based projects? Thanks for sharing these.
So, what if I just started with Vue 3 vanilla and want to migrate to any of these? I'm new when it comes to JavaScript frameworks, but not new when it comes to programming (just old).
What about nuxt?
Great video Erik, I think by accident I am the first one to have watched the whole thing :D
Hi Eric - where do you think NUXT fits in all this?
Nuxt is still in beta, will probably be dope once totally finalized and production-ready, especially since it will just use all of what is listed in this video, on top of SSR + QoL features baked-in.
@@kissu_io Yes Nuxt 3 is in Beta, but you can still use Nuxt 2. I was just curious why Eric didn't mention it in the video, and what his thoughts are on it.
@@JamesBaddiley Nuxt 2 does not support Vue 3, and as he mentioned at the start of the video his recommendations are based on Vue 3.
Hi Erik, do you know if you can make mobile apps using Vue? Or is there anything in the works for creating mobile apps using Vue? Lastly, I am shopping around for a library and I am deciding whether I should choose Vue or React. What makes Vue user friendly for new developers. I have only been learning JavaScript HTML and CSS now for 4 months and feel ready to learn a library. I could strongly use your guidance, thank you.
Thank you!
Exactly the stack what I use :)
What vscode theme for coloring are you using
Synthwave 84!
Hey Erik, love your videos man! Keep them up! Had a Telegram conversation with Evan You yesterday and he recommended naive-ui for vue 3. Would love to hear your thoughts about it
script setup gang ✌🏻
Can u check solidjs framework?
I just chatted with the creator on Twitter, I want to get him on after the hollidays to show me!
Do you know of any "good" libraries that wrap MSAL and work well with Vue 3? By the way, I've been using script setup and like it a lot. Thanks for all the other recommendations.
MSAL? Thanks for watching!
So helpful! Quick question, if someone were to start learning Vue 3, and they got a job at a company that has existing Vue 2 projects, would they be able to understand and maintain them?
Options API and Composition API is not the same. Meanwhile, you can totally use Options API with Vue3. IMO, learning Options API first is still the way to go because it's easier.
And you can use composition API in vue 2 with composition API package, maintained by vue team.
I did not try Vue3 yet, so it's difficult to say is faster or not. But I can say that according to the documentation looks like the new composition API requires writing more code to achieve the same result and I definitely do not like that.
Awesome video! I'm glad I'm using most of the stuff you're recommending, it makes me feel good, haha :)
why not just Nuxt?
thaaaaaaaaaaaaaaaaaaanks!!!
I don't think you are correct. Vuex is the recommended state management tool for Vue. Do you have a source that says that the crew recommends Pinia instead?
github.com/vuejs/rfcs/discussions/270
You can use both, but Pinia is becoming more of an easier alternative for it.
By reading about it I feel like they now go in both directions at the same time. My guess is that they will merge them back into Vuex in the end. We will see. You channel is great Erik. Only thumbs up from me. 👍
So, I'm wathcing this from 2022, and Nuxt is still in RC so I still can't migrate to Vue3 :)
nice , but iam new to vite so can someone show me how to emit inside a function , when you are using cli you can say 'this' , but in vite it doesn't work.
You import in `emit` from vue.
Eh... How about nuxt?
Once it's out of alpha/beta, I'll look at it again. But right now, it's not quite ready. I do like Vue 2 with Nuxt bridge though,
Nuxt 3 still not release
so its vue 2
Nuxt3 is publicly available, even if still in beta.
I mean LTS, without LTS and stable version, we cant use it in corporate
Nuxt...
vue 2 was so easy to work with. Vue 3 appears brutally complex and disorganized.
Which is better? React of course!; which is nicer to work with? Svelte of course! :D
Sound only out of 1 ear or just me?
anyone recognize the Veritasium music? :v
Hah yup!
I love Vue and Vue 3, but bro started with "latest and greatest" lol
Why is noone using class based syntax API? Makes refactoring with webstorm a charm.
Because most of the people prefer less boilerplate and use VScode.
@@kissu_io ok.. what boilerplate though? Composition API has more boilerplate than class based syntax it seems to me..
this might be my opinion (or just small, short-sighted conclusion), but I can say, at least in my team reaaally don't like bringing class system into their javascript code. When I ask why, they said that it feels rigid and imposing (in addition, it gave them vibes of coding in university back then; and they don't like it for some reason).
@@akasection ok, that might be it. JS devs not being too fond of classes in general 🤷🏼♂️
Tbh, I feel like classes are almost redundant in JS when you can create and work with objects directly as opposed to languages like C#, Java, C++ etc. where you have to instantiate classes in order to work with objects.
I would change title to ..best vue stack for pet projects and landings. Or list of most hype technologies.
vue-test-utils - has a lot of problems
vite - also doesn't ready for big production
what about ssr with vue 3?
file based routing - in my opinion the worst thing that exists in nuxt
script step brings too much magic
tailwind - reinvention of inline css with style attribute
It's not for everyone. This is good concerns. Vite though is production ready. Lots of apps are using it now. And SSR exists in Nuxt 3 v3.nuxtjs.org/
The worst about composition API - it's hard to read.
Every developer make his own structure and instead of easy-reading on options API components - you have to read spaghetti code.
You have to be disciplined when writing the composition API for sure.
@@ProgramWithErik Me - yes 🙂What's about other developers in the team ? :-)
If some framework/language allow you to do sh*t - be sure you'll see it everywhere ;-) I can't compare or select which API is better - Options or Composition - They're for different purposes :-)
I disagree basically with all recommendations 😂
I don't know why you would even consider using Vue2 or even mention it. Vue3 is better than Vue2 in every way. Same with Vite and VueCLI. You don't even need to mention it, it's obvious.
The composition API is the future. Libraries and frameworks that don't build on the composition API are going to go the way of the dinosaurs. Either VUE keeps pushing forward progressively or it will become another dead development platform. Angular is struggling for this exact reason.. If you don't progress in today's day and age and tech leaves you behind... Nortel, Nokia, Blackberry...
2 Years ago Quasar was by far the most complete front-end development platform for Vue... Unfortunately it is developed by only 1 person and it is falling far behind despite being one of the first to incorporate VUE3....