Vue 3 Script Setup, The Future Of Vue? Tutorial And Setup

[@Frank-Lee-Speeking]

This is the video I've been needing! Finally, a proper explanation of the difference in usage and coding between , with the setup{} function, and !! Bravo to you, Erik! Now, if only all those old videos that used just or with {setup} could be magically remade to use ....

[@otahak]

Man, I'm usually pretty good about figuring things out from official documentation, but after three days of banging my head against the wall trying to understand props and their correct syntax your video is the first time I've understood/achieved passing data between components. Looking forward to your other videos!

[@noblesavage149]

Anyone else getting ready for Nuxt 3? :) Keep up the good work Erik

[@wobsoriano]

me! Excited to migrate my current project from

[@wobsoriano]

is the future. Add in volar vscode extension for template inference!

[@irishbruse]

I just started learning vue a month ago and this is what i used for my website it works great its just less boiler plate and the functions for props make it easy to tell if the component takes in props

[@NeilCarpenter-ru9vh]

I've been using the options for several years now and quite comfortable using it. We're going to try using the composition API on our next project, mainly for the composable features, but there are a few things that concern me a bit. I actually like how things are organised using the options API... having all my methods together, all my probs together, all my data together is fantastic for me and I feel like with the composition API things are going to end up all over the place. I'll see how it goes. Thanks for this video though - think I'll have to watch it through a couple of times because I got a bit lost towards the end. Thanks again.

[@antifa_communist]

In the options API you're just forced to have them together. If you want, just make some comments around where each thing.

[@ลุงยุทธ์ยันกัญชา]

From vue2 to vue3, we had to change a lot of ways of using it. very easy to understand Even though I'm not very good at English, thank you very much.

[@yanyam7700]

Okay I've been fidgeting with this new way for 2 days just about, and I love it. This definitely makes the composition API much more bareable for me, even though its small, it does matter.

[@TarikBoschi]

Excellent demo. It's amazing sugar syntax. Very similar to Svelte

[@miladrezai14]

so which one should i learn as begginer for find a job ?

[@dontqsy5101]

@@miladrezai14 Between svelte and vue? Vue has more job oportunities

[@_moon7157]

Awesome explanation! I just totally got them real quick thanks to you! Thank you from South Korea.

[@ProgramWithErik]

Glad it helped!

[@contractorwolf]

Erik, great video. We just started the transition this week from Options API and I was already loving the "script setup" but your video really filled in the gaps of knowledge and answered a bunch of the questions I had. Thanks!

[@alex_blue5802]

Wow, I'm very impressed by the setup script. I've been using the options API thus far and it was fine, but this is next-level when it comes to intuitive and elegant coding. I'll be using this in the future.

[@elultimopujilense]

Awesome video! even better than the docs!

[@SvingitGolf]

I have started to use this. The code gets cleaner and easier to read in this way.

[@ProgramWithErik]

Yeah I think so too!

[@TheInsaneFear]

Great video, i'm loving the new script setup. Define props using typescript directly is really good. One tip, in your HelloWorld example you don't need to implicit set inheritAttrs to false because it's a multi-root node component, so the inheritance is disabled by default, you just need to disable inheritance when using a single root node and you want the binding to be in some child of this root element.

[@igordasunddas3377]

This video definitely convinced me to subscribe! Thank you for quality content!

[@amirrezam75]

That's what I needed to know in order to migrate from vue 2 to 3. Thanks❤

[@ProgramWithErik]

Great!

[@metronomo1676]

Very nice video! Thanks for all the knowlegde Erik. If someone has ESLint activated and receive the error "The keyword 'interface' is reserved" must update ESLint version (removing his typescript dependencies previously and after the update reinstalling them). I received the error with ESLint 6.32.0 and now I have the 8.0.0 ESLint version and works fine.

[@dimakovalenkov7835]

Thank You! I'm just starting to learn Vue and immediately want to learn a new syntax, it's even neater = )

[@JeremiahFulbright]

Excellent! What extension are you using that added the `setup sugar` and `pug` notations?

[@LofiCoder]

really need this, everybody is talking about it.

[@0x3333]

Dude, you just nailed it! 👏

[@mohamedruslicali5926]

Hello. Can I ask what color theme you used?

[@javadnoroozi2081]

Exactly what i needed to migrate from vue 2 to 3 Thanks ❤👍

[@alias_one11depapel81]

That was super great! Thank you and i will check out your fututre vue 3 courses. I hope its in typescript too.

[@ProgramWithErik]

Glad you liked it!

[@GaryLee]

Great tutorial for the setup function feature.

[@ProgramWithErik]

Glad it was helpful!

[@ferryhtw]

This video help me a lot! Thank you..

[@cswalker21]

Thanks, good video. I definitely think this is part of the right direction that Vue is moving. Along with Pinia, this is reducing extraneous and cryptic boilerplate and I love it.

[@RenatoFontes]

Thanks! The setup scripts looks awesome :)

[@mweb7344]

damn vue is improving so fast

[@ProgramWithErik]

Yeah things are moving fast!

[@toddmoody9507]

Awesome overview! 🙌

[@ЕвгенийБородкин-ы8э]

The best! Thanks! Please make more Typescript+Vue3(script setup)

[@ProgramWithErik]

Ok!

[@stevepottz111]

Great Video! I really enjoyed it!

[@gaetanwichlacz8319]

Just discovered your channel. Massive props (pun intended) to you for these clear explanations. Used to Vue2 component Class Style, and now, for next projects, I might give a shot to this script setup thing. Awesome also how you cover every aspect. Props, events ...

[@hamil1806]

Great explanation! Actually you can pass event to props in different way

[@bhumit070]

thanks Erik for this video I will use this in my next project and I like this approach too much

[@tririfandani1876]

Nice info 😉 thanks

[@Tassaczek]

Fun Fact: you could use Vue2 with Class Base Components and vue property decorator and have this for a long time :) So script setup makes way easier to move to vue3 :)

[@cnikolov]

from 3.2 I personally like the most the custom components registration.

[@cryodream]

4:38 What extension is putting those "hints" checkboxes above the the `` ❓ i.e.: setup sugar | ref sugar (take 2) 🤩

[@Dazaer]

I would also like to know... vetur doesn't seem to do the trick for me EDIT: just found out it's volar

[@SergeiZahharenko]

cool stuff :) 2 bad I don't use VUE that often this days... looks nice

[@djdeuce00]

Great video. You covered a lot and explained very well. I'm coming from React and this seems like the best way for me

[@azs06]

Excellent way to teach about the new features, It helps to understand the advantages/disadvantages of composition api when its showcased alongside options api. One thing I like a lot about Vue, is how adaptive they are when it comes to new features. Seems like these new features are inspired by Svelte and that's a good thing in my opinion.

[@terenceflowers9159]

Really nice!!!! Thanks!!!!

[@robertoaddario861]

Thanks for the explanation

[@ProgramWithErik]

You're welcome

[@JarvisCodes]

Helpful Vid Subscribed!

[@icarofreitas6523]

Thanks

[@kirayamato6128]

Hey erik. What vscode extension do you use for vue?

[@OzoneGrif]

Super interesting. We're using class components with Vue 2 in our project; but this new syntax feels a nice improvement. This is a lots of work to switch our project, tho.

[@contractorwolf]

we just started using this and you can do it at the component level (as long as the project is on vue 3). Just try it with new components you are writing and save the conversions of older code for later. They work together without issues.

[@swastikagarwal8605]

Hey Erik great tutorial, small question how do you send arrays as props in the same way I seem to get errors that the props are only readOnly when I try to set a default array of [" "]

[@MarkoPetejan]

I like the new way, would like to know more

[@arjunaravind1351]

Hi Erik, How do we define lifecycle callback functions inside the API? Is it even possible?

[@ProgramWithErik]

Yup, you just import them in from "vue". Like import "onMounted" from "vue"

[@contractorwolf]

yeah, they just start with "on" (onMounted, etc. inside the setup) and there is no "created" because that is essentially the setup which only gets run the one time

[@dev-am1303]

Thanks Erik

[@revolutionoftheresolution5867]

can you give us some info about how to use script setup on Vue3 - apollo? please do a video on this topic

[@edu.paixao]

Thanks!!

[@NikolayErmolenko]

Hi, Erik. Can you describe next case: Vue3 + typescript + script setup + JSX ? Thx.

[@AndrewRusinas]

I love the syntax, but I got so many error while I use it with TS (unused variables, error while importing Vue component, etc). Also, in my opinion, we should have a clear way to declare which variables will be accessible in template, which was previously achieved in setup() via return {}.

[@nove1398]

good one

[@mohammadaliafrasiaby2347]

HELLOOOOOOOOOO! please create jwt authentication course in nuxt 3 and pinia THANK YOU !

[@ryannorooz]

just in time... last week i moved back from nuxt2 to vue3 to use the composition api it's really a better way to make SFCs hope nuxt catches up with the new changes

[@dayumnson9769]

you can use nuxt compositionnapi package with nuxt2

[@ryannorooz]

@@dayumnson9769 yeah that has been around for awhile but it won't give you the full flexibility of vue3 a lot of features aren't there yet for nuxt

[@JenuelDevTutors]

ill definitely like this feature

[@RianY2K]

This Vue JS is more comfortable to use with Composition API and new setup script

[@adekivet]

Hi Erik, nice video again! Just yesterday I used a different approach on your withDefault solution, with the same result: const props = defineProps({ direction: { type: String as PropType, default: 'row', } }) Do you have an opinion on which is the better approach? I am now leaning towards the the way you showed, although you have to wrap it in the 'withDefaults'. Maybe yours is better as you are able to define the type/interface separately when they become more complex? And it is more the generic TypeScript way vs specific Vue way? Just curious about your idea on this.

[@edisonarango]

Yeah, your way is as in Vue 2, but the new approach allows you to define the props using Typescript so that you can get type inference in your editor.

[@albinopepegas8391]

what's your vscode font?

[@PureAlbania]

How to put the browser hidden on the right like that? Thank you!

[@thomasbritton86]

On the face this is just pretty much the same as how to work with Svelte?

[@George-ew2in]

Hey Erik, very nice, but my Vetur extension has problem with setup script and if I define some variable or import component, Vetur says "something" is declared but its value is never read, it is possible to do something with it? anybody some tip? thank you for answer.

[@ProgramWithErik]

Try out Volar!

[@ricko13]

finally 👍

[@dayumnson9769]

the svelte way of doing vue, not bad.

[@RodrigoCFD]

21:30 Having two script blocks is really messed up... I like the idea of the Composition API, but stuff like that (and the damned .value everywhere) really shows how unpolished it is, like it was rushed.

[@pedrop1192]

I was trying to translate a project I had to script setup, and I always get a 'defineEmits' is not defined errror. Same with 'defineProps'. Any idea of what might be going on?

[@gabe.henrique]

What lint / auto-complete plugin are you using? Vuteur doesn't have support yet & these errors are super distracting!

[@ProgramWithErik]

Use volar!

[@gabe.henrique]

@@ProgramWithErik Awesome! Thanks dude

[@artphakphoom1012]

NIce Video can i ask some question i struggle in the choosing framework to master it i use vue2 for a couple of my freelance and loving so much but i concern about vue3 for production it's a lot of arguing for now and react community is very big so that's make me struggle in choosing which one should i use i love both and i can't make desicion around 1 month already can someone make me clear my mind plz and sorry for my english.

[@heyyy4987]

Awesome

[@likewealwaysdo]

Oo putting the tag BEFORE the ? Somebody has been trying out Svelte I see 👀

[@wobsoriano]

It's now the default when creating a vue app with vite

[@likewealwaysdo]

@@wobsoriano ah i see my bad didnt realise since i dont rlly use vite 😅

[@wobsoriano]

@@likewealwaysdo yeah RIP vue-cli. Vite is fookin fast

[@rsixel]

Killer!

[@chizuru1999]

Hey i have 2 questions. 1. Whats your vscode font and theme. 2. I just build an app on Vue 3 and deployed it today. But I had to modularize it. Coming from Angular I don't like how we write 3 languages code in a single file and also no intellisense. So had to separate the files. Is there any official workaround or modularized architecture for large scale applications?.

[@ProgramWithErik]

I'm using Fira font and Synthwave 84. For intellesense make sure you're using either Vetur or Volar. I prefer Volar with Vue 3 and TypeScript. It works great. For large apps, you usually create Feature folders and put your components in there. You should stick with single file components. It makes the most sense. Take a look at the VUe 2/3 Enterprise boilerplate for some more suggestions on how to create larger Vue projects

[@babatundeojerinde]

I think I prefer this approach… the options API requires too many boilerplate codes… with this, I can reduce the amount of code I write…

[@wota_pov]

Is there any fast way to migrate from composition api to this script setup?

[@wobsoriano]

is still composition API. Use Volar extension in vs code. It will add a checkbox above the script tag to toggle setup sugar.

[@wota_pov]

@@wobsoriano Great! It's awesome

[@cwinter90]

This reminds me A LOT of Svlete... 😆

[@EugeneBuvard]

I think I still like better the option API, it makes things clearer and forces a bit of order in js.

[@andristefanus]

how do you invoke child's handler=false from parent's @click?

[@tanzimibthesam5861]

Top level async await is awesome

[@ProgramWithErik]

Yeah it is

[@fardolieri]

I really don't understand that part. You didn't show a TOP LEVEL await in your example. You just defined an async function, that you called on button click. The interesting part would be to know if you can use an await in the 'setup' part i.e. on the top level, without using an 'onMounted'

[@ofuzak]

It doesn't log error on chrome console, verryyy had to debug

[@cenancivi3407]

Thanks Erik, another very helpful video but I am afraid all these features are just adding excess on top of the simplicity and beauty of good old Vue2 with little and sometimes no extra functionality in most aspects. I am a novice developer but my view is that just as in business, the competitive edge of Vue was its simplicity and fast learning curve over others.

[@ProgramWithErik]

Yeah, I really like it, but it's not for everyone

[@LucTemetNosce]

The good thing is that you can still use it the way you are comfortable with, it's perfectly valid. This is just another way for those who want to do it in a new way.

[@AdroSlice]

The options API is a big reason we chose vue to begin with. However, we have now run into a situation where composition API stuff like provide/inject as well as composables may come in handy.

[@arcooke]

Glad to see this comment, I thought the same thing. Learning curve is much higher using the new style, though I can see the appeal of the new features. Not a huge fan of the way the "withDefaults" concept was implemented. Defaults are such a basic, common thing.. seems like there should be a more straightforward way to do this.

[@antifa_communist]

​@@arcooke No? Script Setup is way easier. To have a simple counter you need one line of JS (not including import). It's just like normal JS. Can someone explain how it's easier? And I get some people might prefer one over the other but the learning curve is basically non existent.

[@zhiweithean800]

I think defineEmits() does not state the events that the component will receive from the parent component, but what are the events this child component will emit up to its parent component. Just a mistake in the video explanation.

[@ProgramWithErik]

Aww thanks!

[@youjean83]

theres just one thing that bothers me with the composition api. it exposes everything into the template while the optionsApi gives some more granular controll. i think it pretty much depends on the use case, preferences and how consistent you wanna be across the app..

[@okq550]

I believe options API are well structured than this new SFC approach.

[@georgemendle5587]

👋

[@tihssiefil]

受益匪浅

[@Mr_bombastic-839]

very sorry at the begining itself, am here to learn Vue, and yes this is an amazing video, no doubt in that, but i couldn't help but notice the intro music you used, which constantly reminded me as if i was watching @Veritasium video, mostly to do with science and Physics... and that effected positively how i precieved this video, more like a fact based implementation than a tutorial.. anyway, just my opinion...

[@jamols09]

Shouldn't be the title: SFC defineEmits Tutorial ? hehe :)

[@rajikkali2381]

Too. Much. Boilerplate. Besides TS support, this is just way too much typing for things you'll be doing all the time. I've built many medium to large-scale apps, and this looks horribly ugly to me compared to the Options API. I keep wanting to like the composition API / Setup.... but alas I just can't.

[@sibyl4861]

You have to write more stuff with options API tho

[@rajikkali2381]

@@sibyl4861 I don’t feel that way , especially when I use snippets to generate code

[@MrGokuuuuuu]

This is so super confusing, that I have to watch this 25min video to even understand whats going on after encountering setup. If I see props they are props, if i see data that are data, i see methots well methods are in there, when i see mounted method I know to put stuff in there on start. But when I see "Setup" its some super confusing all in mixed stuff in shorthand syntax which make it even more confusing. I love vue from vue1-3 since of simplicity, one can see what is happening on first look, this setup is some Black magic.

[@AndiRadyKurniawan]

This is basically svelte. 😅

[@emmazn5192]

am i the only to find that the script setup is less understandable than classic script ? like there is no more structure between data, computed, watchers...

[@kirayamato6128]

I really don't understand at all. Why there must be an options to choose. This makes developer really confused. What should i choose? Setup function or the ? LOL. That's why sometimes i hate vue. Inconsistent framework

[@nested9301]

this is the way it's should be all the time smh

[@davidzita1404]

typescript 🤮🤮🤮🤮

[@wobsoriano]

found the TS hater! hehe it's okay to hate it. To each their own