Which Is Better? Vue CLI or Vite? Options API vs Composition API? My Vue Recommendations...
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- In this video I discuss what approach I would take creating a new Vue application in 2022 and beyond! We'll look at Vite, Vue CLI, Composition API, Options API, Vitesse, Vola plugins, Pinia, routing and more!
👉Check out my last video on adding social media logins to your app
• How To Create an Authe...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 Module course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bos ! 💻
Begginer JavaScript - BeginnerJavaScript.com/friend...
React For Beginners - ReactForBeginners.com/friend/...
Advanced React - AdvancedReact.com/friend/HANC...
0:00 Introduction
0:39 Table of Contents
01:15 Vue Version
03:27 Build Tools
05:30 SFC Layout
07:09 Router
07:36 State Management
09:05 Test Frameworks
09:54 Starter Template
10:34 Component Library
11:39 IDE Plugins
Links
pinia.esm.dev/introduction.ht...
vitejs.dev/
![[Live] : ONE FIGHT NIGHT 24 วันนี้!! “จาร์เร็ด vs กุสตาโว”](http://i.ytimg.com/vi/ENNA-fsT67c/mqdefault.jpg)
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.
Always great up to date content. Thanks.
This is a great video! A lot of things have evolved.
Thanks for the video.
Looks like it's time to update the knowledge
I was confuuuused before this video, but you answered my exact questions. Such a great video, thank you!
Thank you for guiding me into the best Vue stack!
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.
Nice work Erik. This is great info 👌
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.
Amazing content, ty Erik!
Congrats on the 100K, Erik!
Thank you!
Thanks for the recommendations
My favorite channel for Vue
I use the same tools except testing. I only do small projects and feel having a full testing stack is not necessary.
Great video as always
Wow Erick really amazin video, thanks for sharing
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.
For now, I'd always recommend Vue 3 + Composition API + TS
Thank you!
thank you Erik,it's helpful.
You're welcome!
Perfect timing
Exactly the stack what I use :)
thannks
Eric, the first thing that came to my mind as I played this video was the soundtrack you used. Reminds me of Veritasium🥹
Great video Erik, I think by accident I am the first one to have watched the whole thing :D
🎉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.
Thanks)) To much a new info) I have still used V2))
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?
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.
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
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!
Can you do a video on Clean Architecture (Uncle Bob) with Vue/Nuxt?
Those slides look great, did you design them or are they a template?
Template thanks!
Awesome video! I'm glad I'm using most of the stuff you're recommending, it makes me feel good, haha :)
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.
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, th-cam.com/video/FJRuG85tXV0/w-d-xo.html
script setup gang ✌🏻
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.
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.
thaaaaaaaaaaaaaaaaaaanks!!!
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!
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).
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).
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.
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.
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.
Vuetify not being ready is why I haven't switched to Vue 3 yet. Big bummer.
TailwindCSS
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.
What vscode theme for coloring are you using
Synthwave 84!
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.
Please guide how to setup PWA using VITE with VUE.
I'll look into it!
What about nuxt?
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. 👍
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!
Nuxt...
So, I'm wathcing this from 2022, and Nuxt is still in RC so I still can't migrate to Vue3 :)
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
why not just Nuxt?
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,
Which is better? React of course!; which is nicer to work with? Svelte of course! :D
anyone recognize the Veritasium music? :v
Hah yup!
vue 2 was so easy to work with. Vue 3 appears brutally complex and disorganized.
Sound only out of 1 ear or just me?
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/
I love Vue and Vue 3, but bro started with "latest and greatest" lol
I disagree basically with all recommendations 😂
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 :-)
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....
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.