Which Is Better? Vue CLI or Vite? Options API vs Composition API? My Vue Recommendations...

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/

[@ProgramWithErik]

Want to learn more about Vue? I have a six module course on it here! bit.ly/2OETt0M

[@MrAndi1281]

sometimes i am sad that i only can give one Like to a video :(....thanks for this, awesome video!!

[@newage9670]

"than", not "then". One of the most common mistake in English.

[@namaefumei]

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

[@LucTemetNosce]

Always great up to date content. Thanks.

[@serosgb]

This is a great video! A lot of things have evolved.

[@antonbilichenko1312]

Thanks for the video. Looks like it's time to update the knowledge

[@chukwumaifeanyi4083]

Nice work Erik. This is great info 👌

[@z4ckfytc777]

Thank you for guiding me into the best Vue stack!

[@OzoneGrif]

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.

[@allanchavez3641]

I was confuuuused before this video, but you answered my exact questions. Such a great video, thank you!

[@lithium820]

im still bummed that vuetify is still not actually released for vue3, only as nightlies...

[@FNXTproductionz]

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.

[@caiovinicius7871]

Amazing content, ty Erik!

[@axbe_]

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.

[@BhargavaMan]

Congrats on the 100K, Erik!

[@ProgramWithErik]

Thank you!

[@Josehernandezl]

Wow Erick really amazin video, thanks for sharing

[@bakhtiyor_sulaymonov]

Thanks for the recommendations

[@martinfinch5011]

Great video as always

[@mortalmotivation]

My favorite channel for Vue

[@garikaib]

I use the same tools except testing. I only do small projects and feel having a full testing stack is not necessary.

[@j4nch]

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?

[@JohnGodwin777]

Perfect timing

[@xiuChang]

thank you Erik,it's helpful.

[@ProgramWithErik]

You're welcome!

[@rrd_webmania]

Exactly the stack what I use :)

[@jacobschmidt4961]

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.

[@JohannGarrido]

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.

[@fpigeonjr]

🎉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.

[@psybitcoin]

Can you do a video on Clean Architecture (Uncle Bob) with Vue/Nuxt?

[@Rivederchee]

Great video Erik, I think by accident I am the first one to have watched the whole thing :D

[@cesswhite]

Thank you!

[@Lucas-mu5no]

For now, I'd always recommend Vue 3 + Composition API + TS

[@allanchua9394]

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

[@marcosmoralesrodrigo9963]

Awesome video! I'm glad I'm using most of the stuff you're recommending, it makes me feel good, haha :)

[@DevlogBill]

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.

[@bellaluz383]

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?

[@bellaluz383]

Just found it, kzbin.info/www/bejne/fHu1pnpuatmLjJI

[@danielbuch1301]

Nice video. Would really be interested in your oppion regarding Nuxt. Is it worth the extra setup and dependencies?

[@kissu_io]

It's probably not stable enough (yet), but coming soon!

[@JustBCWi]

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).

[@yuriybondaruyk1145]

Thanks)) To much a new info) I have still used V2))

[@salmaboudil9696]

thannks

[@justgrumpy]

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.

[@ProgramWithErik]

MSAL? Thanks for watching!

[@edenassos]

Those slides look great, did you design them or are they a template?

[@ProgramWithErik]

Template thanks!

[@Remmenth]

What about styling? Do you prefer CSS/SCSS, or maybe styled-components or something else?

[@ProgramWithErik]

SCSS

[@kissu_io]

Vanilla Tailwind is still the best IMO, no need for more.

[@Remmenth]

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).

[@benjaminkieper568]

Hi, thank you! What about ts vs. js in relation to vue?

[@ProgramWithErik]

I use TS all the time in Vue 3, that's the way to go honestly. The whole industry is going that way.

[@aleksandarstevanovic5854]

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

[@kissu_io]

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).

[@samuelmorkbednarzkepler]

"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

[@blank4157]

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.

[@JamesBaddiley]

Hi Eric - where do you think NUXT fits in all this?

[@kissu_io]

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.

[@JamesBaddiley]

@@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.

[@hhh0118]

@@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.

[@briankgarland]

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.

[@giridhart]

What vscode theme for coloring are you using

[@ProgramWithErik]

Synthwave 84!

[@LukenSkyne]

script setup gang ✌🏻

[@YarkiiYa]

thaaaaaaaaaaaaaaaaaaanks!!!

[@gtanmoy]

Please guide how to setup PWA using VITE with VUE.

[@ProgramWithErik]

I'll look into it!

[@nghbrhood6848]

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?

[@kissu_io]

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.

[@blank4157]

And you can use composition API in vue 2 with composition API package, maintained by vue team.

[@user-kr6lp7rm5y]

Can u check solidjs framework?

[@ProgramWithErik]

I just chatted with the creator on Twitter, I want to get him on after the hollidays to show me!

[@beta82]

What about nuxt?

[@mohamedkunle528]

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.

[@ProgramWithErik]

You import in `emit` from vue.

[@cwinter90]

Vuetify not being ready is why I haven't switched to Vue 3 yet. Big bummer.

[@kissu_io]

TailwindCSS

[@jenstornell]

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?

[@ProgramWithErik]

github.com/vuejs/rfcs/discussions/270

[@ProgramWithErik]

You can use both, but Pinia is becoming more of an easier alternative for it.

[@jenstornell]

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. 👍

[@yatsuk]

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.

[@suman-majhi]

Nuxt 3 still not release so its vue 2

[@kissu_io]

Nuxt3 is publicly available, even if still in beta.

[@suman-majhi]

I mean LTS, without LTS and stable version, we cant use it in corporate

[@XRENDERMAN]

So, I'm wathcing this from 2022, and Nuxt is still in RC so I still can't migrate to Vue3 :)

[@RR-et6zp]

why not just Nuxt?

[@geoffreylee1780]

Eh... How about nuxt?

[@ProgramWithErik]

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,

[@offgridvince]

Nuxt...

[@enriquesneffels3053]

Which is better? React of course!; which is nicer to work with? Svelte of course! :D

[@madsteeez]

Why is noone using class based syntax API? Makes refactoring with webstorm a charm.

[@kissu_io]

Because most of the people prefer less boilerplate and use VScode.

[@madsteeez]

@@kissu_io ok.. what boilerplate though? Composition API has more boilerplate than class based syntax it seems to me..

[@akasection]

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).

[@madsteeez]

@@akasection ok, that might be it. JS devs not being too fond of classes in general 🤷🏼‍♂️

[@blank4157]

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.

[@Steve-Richter]

vue 2 was so easy to work with. Vue 3 appears brutally complex and disorganized.

[@rajikkali2381]

Sound only out of 1 ear or just me?

[@mukostenko]

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

[@ProgramWithErik]

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/

[@PenguinCrayon269]

anyone recognize the Veritasium music? :v

[@ProgramWithErik]

Hah yup!

[@AceixSmart]

I love Vue and Vue 3, but bro started with "latest and greatest" lol

[@timonbandit]

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]

You have to be disciplined when writing the composition API for sure.

[@timonbandit]

@@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 :-)

[@feimberg]

I disagree basically with all recommendations 😂

[@russstephanson6987]

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....

[@svenyboyyt2304]

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.

[@dan_le_brown]

Eric, the first thing that came to my mind as I played this video was the soundtrack you used. Reminds me of Veritasium🥹