Vue 3 Script Setup, The Future Of Vue? Tutorial And Setup
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- Vue.js has a new Script Setup feature that is changing the way you create Vue apps. Should you use it? In this video I discuss how you can get started with Vue.js 3 Script Setup
👉 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 week course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses Out On Udemy ! 💻
The Complete 2020 Web Development Bootcamp - Angela Yu - bit.ly/2ADKEKD
→ JAVASCRIPT ALGORITHMS COLT STEELE'S COURSE - bit.ly/2L8HSPV
→ THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) - bit.ly/2zP4alw
0:00 Introduction
0:24 Options API vs Composition API vs Script Setup
06:54 Passing props with defineProps and withDefaults
11:50 Using defineEmits and events with Vue
15:13 Top level async/await
19:09 Setting up attrs with useAttrs and default export
24:08 Conclusion
------------
Links
/ erikch
github.com/ErikCH/Vue3ScriptS...
![คุณอาเรียโต๊ะข้างๆ พูดรัสเซียหวานใส่ซะหัวใจจะวาย ตอนที่ 2 [ซับไทย] 【Ani-One Thailand】](http://i.ytimg.com/vi/kbbfYakMY8k/mqdefault.jpg)
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 ....
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!
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
Anyone else getting ready for Nuxt 3? :)
Keep up the good work Erik
me! Excited to migrate my current project from
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!
is the future. Add in volar vscode extension for template inference!
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.
This video help me a lot! Thank you..
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.
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.
I've started learning vue 3, its quite different from v2, glad I found your channel. You really do explain things easily!! Thanks!
This video definitely convinced me to subscribe! Thank you for quality content!
Thanks! The setup scripts looks awesome :)
Awesome video! even better than the docs!
Awesome explanation!
I just totally got them real quick thanks to you!
Thank you from South Korea.
Glad it helped!
Awesome overview! 🙌
thanks Erik for this video I will use this in my next project and I like this approach too much
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.
In the options API you're just forced to have them together. If you want, just make some comments around where each thing.
Great Video! I really enjoyed it!
Exactly what i needed to migrate from vue 2 to 3
Thanks ❤👍
Nice info 😉 thanks
Dude, you just nailed it! 👏
Helpful Vid Subscribed!
Excellent demo. It's amazing sugar syntax. Very similar to Svelte
so which one should i learn as begginer for find a job ?
@@miladrezai14 Between svelte and vue? Vue has more job oportunities
Really nice!!!! Thanks!!!!
Thank You!
I'm just starting to learn Vue and immediately want to learn a new syntax, it's even neater = )
Great video. You covered a lot and explained very well. I'm coming from React and this seems like the best way for me
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 ...
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.
Thanks!!
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.
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.
Thanks Erik
really need this, everybody is talking about it.
That's what I needed to know in order to migrate from vue 2 to 3.
Thanks❤
Great!
That was super great! Thank you and i will check out your fututre vue 3 courses. I hope its in typescript too.
Glad you liked it!
I have started to use this. The code gets cleaner and easier to read in this way.
Yeah I think so too!
Thanks
Hello. Can I ask what color theme you used?
Excellent! What extension are you using that added the `setup sugar` and `pug` notations?
Thanks for the explanation
You're welcome
Great explanation! Actually you can pass event to props in different way
The best! Thanks! Please make more Typescript+Vue3(script setup)
Ok!
Great tutorial for the setup function feature.
Glad it was helpful!
good one
cool stuff :) 2 bad I don't use VUE that often this days... looks nice
ill definitely like this feature
from 3.2 I personally like the most the custom components registration.
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.
Awesome
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 [" "]
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.
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.
Hey erik. What vscode extension do you use for vue?
I like the new way, would like to know more
damn vue is improving so fast
Yeah things are moving fast!
Hi, Erik. Can you describe next case: Vue3 + typescript + script setup + JSX ? Thx.
finally 👍
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 {}.
Killer!
Hi, what about case, when you have private variables in setup script, that you don't make accessable in template?
can you give us some info about how to use script setup on Vue3 - apollo? please do a video on this topic
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.
HELLOOOOOOOOOO!
please create jwt authentication course in nuxt 3 and pinia
THANK YOU !
On the face this is just pretty much the same as how to work with Svelte?
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.
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.
what's your vscode font?
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?
How to put the browser hidden on the right like that? Thank you!
the svelte way of doing vue, not bad.
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 :)
4:38 What extension is putting those "hints" checkboxes above the the `` ❓ i.e.: setup sugar | ref sugar (take 2) 🤩
I would also like to know... vetur doesn't seem to do the trick for me
EDIT: just found out it's volar
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.
Try out Volar!
This Vue JS is more comfortable to use with Composition API and new setup script
Hi Erik,
How do we define lifecycle callback functions inside the API? Is it even possible?
Yup, you just import them in from "vue". Like import "onMounted" from "vue"
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
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..
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?.
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
This reminds me A LOT of Svlete... 😆
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
you can use nuxt compositionnapi package with nuxt2
@@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
What lint / auto-complete plugin are you using? Vuteur doesn't have support yet & these errors are super distracting!
Use volar!
@@ProgramWithErik Awesome! Thanks dude
It doesn't log error on chrome console, verryyy had to debug
how do you invoke child's handler=false from parent's @click?
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.
Yeah, I really like it, but it's not for everyone
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.
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.
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.
@@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.
Top level async await is awesome
Yeah it is
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'
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…
Oo putting the tag BEFORE the ? Somebody has been trying out Svelte I see 👀
It's now the default when creating a vue app with vite
@@wobsoriano ah i see my bad didnt realise since i dont rlly use vite 😅
@@likewealwaysdo yeah RIP vue-cli. Vite is fookin fast
Is there any fast way to migrate from composition api to this script setup?
is still composition API.
Use Volar extension in vs code. It will add a checkbox above the script tag to toggle setup sugar.
@@wobsoriano Great! It's awesome
I think I still like better the option API, it makes things clearer and forces a bit of order in js.
👋
受益匪浅
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.
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.
Aww thanks!
I believe options API are well structured than this new SFC approach.
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.
You have to write more stuff with options API tho
@@sibyl4861 I don’t feel that way , especially when I use snippets to generate code
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...
Shouldn't be the title: SFC defineEmits Tutorial ? hehe :)
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.
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
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...
This is basically svelte. 😅
this is the way it's should be all the time smh