Vue 3 Script Setup Tutorial - This Changes Everything!
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- In this video, I’m gonna show everything you need to know to get started with the Script Setup pattern for Vue 3 & the Composition API
👉 Vue 3 Composition API Course: dannys.link/compositionapi
Using the Script Setup pattern will massively reduce the complexity and number of lines in your Vue 3 components.
In this super simple component we’re gonna create it will reduce the lines of our script section from 28 lines to just 14 lines!
So just imagine the kind of reductions you’ll get in a real-world, complicated app with 100s of components!
Throughout this tutorial, I’ll show you how we did things the old way (Setup Function) vs how we do them the new way (with Script Setup).
0:00 Introduction
02:21 Getting Started
04:20 Setup Function - Out with the old…
07:32 script setup - In with the new…
08:58 Methods
11:07 Child Components
13:37 Props
17:14 Emits & Custom Events
20:57 Emits - Passing Data
21:54 Learn More
👉 Vue 3 Composition API Course: dannys.link/compositionapi
👉 My Courses - dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup - dannys.link/vscodesetup
👉 DONT CLICK THIS - dannys.link/dontclick
![บุษบา - วงชานเมือง [LiveCoverVertion] Original : เมนทอล](http://i.ytimg.com/vi/Dm81sKcd9rs/mqdefault.jpg)
Please Like, Share, Subscribe & Comment - it all helps me create more content for you!
👉 Vue 3 Composition API Course: dannys.link/compositionapi
👉 My Courses: dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup: dannys.link/vscodesetup
👉 DONT CLICK THIS: dannys.link/dontclick
Love your courses, Thanks
@@jamshidabduqodirov2427 Thanks Jamshid! 👍
that last segment taught me more about emits in Vue *with* the Composition API in 1 minute than the rest of my hours of research combined
Glad to help!
This tutorial is freaking awesome, the new script setup works very much alike svelte, and I can't wait for the new Vue3 composition-api course, Thank you Danny 🙏
Thanks Mask Man! I still need to get around with playing with Svelte! 👍
Actually my name is Bob and I am 49 :) Awesome videos Danny, very well explained and easy to follow. Love Your Work!
Thanks Bob! 😂
i loved the comparaison between the old and the new setup,script setup is just a wonderful method to make developement workflows very easy and simple
Glad it helped!
man, didn't know the script setup was so powerful, you're tutorials are amazing
Thanks Albert!
This tutorial made me buy your new Vue 3 with Pinia course! Thank you, so helpful.
Thanks, hope you enjoy the course!
Thanks for the breakdown. I really liked how you clearly demonstrated the differences and the "so what" factor between options and composition api with straightforward commentary and examples (and pointed out the lines of code reduced)
Thanks Anthony!
The music in the intro was so eerie, that I'm watching this video in my gas mask.
😂
So glad I stumbled across your video :)
Thanks Duc!
As always - a great tutorial. Can't wait for more stuff and you course.
Thanks 👍
Amazing and mind-blowing as always.
Thank you Danny!
Cheers Basar! 👍
this is the best vuejs channel!
Thanks Raheel! 👍
Absolutely brilliant video. If you are using VSCode, select the text and use CMD+/ to toggle comment on the selection....Will save you headache in these vids!
Thanks Omega. Yeah, I know the shortcut. I was doing it manually as using the shortcut was messing up my unusual indentation for some reason 👍
This is great. I love how you show the old and the new making it very easy to follow along
Thanks Farah!
Fantastic demonstration… :) thanks a ton
You're very welcome!
As someone who’s been absent from Vue since Vue 2, I’ve completely missed the setup function pattern composition api, but this seems waay more intuitive. Great tutorial!
Thanks Boian!
Again a mindblowing, easy and great explanation, Danny.
Thank you so much!
Thanks Weller!
I Love the script setup, great video!
Me too! Thanks Andre! 👍
Thanks man your view is straight to the point an I love it
Thanks Chetan!
EXACTLY what i needed! well executed, thanks!
Thanks Armin!
Thank you so much for this video, really help me a lot.
No worries, Bru!
Thank you for the tutorial! I have been struggling for weeks to figure out different patterns to use in Vue (I am new to it), and this video helped a lot! I tend to like the script setup pattern.
Thanks. Glad it helped!
I've fallen in love with Vue again. Great tutorial!
That's great to hear, Klawe! Yeah, shame Vue 3 didn't come out of the gate with Script Setup. It makes such a difference!
This video is Extremely helpful! I love it! Thank you Danny!
Glad it was helpful, S!
This is what I was looking for, most of the tutorials were flying over the changes. I'm still new to Vue and was using the old way using data method. Thanks a lot and I'm gonna check your course!
Glad it helped Mango! hope you enjoy the course!
Fantastic and extremely valuable info! Liked and subscribed.
Thanks Sergio!
Great! Good luck with the new course.
Thanks Felix! I've recorded all the videos, we're just editing now. Almost half the content is coming to TH-cam soon 👍
Great content, help me a lot. keep it up 🔥🔥🔥
Great to hear, thanks!
Very clear, thank you!)
You are welcome!
esse tutorial é o melhor do youtube atualmente , obrigado
Uau! Obrigado Augusto!
Just awesome... excellant clarification 👌👌
Thanks Sanjay!
Amazing! Thank you so much
My pleasure! 👍
Thank you very much Danny. ❤️
No worries, Khashayar!
This one video is enough to understand all about script setup. Thanks
Thanks Masum! 👍
This video is amazing!
I was completely lost in various people's code, mixing up the two patterns and having a super frustrating time writing code that works, but not knowing why. That said, also pretty new to Vue.
Thank you, Danny!
No worries. Glad it helped 👍
thank you so much tis was so clear from you
Great to hear, Walid, thanks!
Thanks for new knowledge.
My pleasure! 👍
Great tutorial!
Thank you Ali!
Great video, thank you.
No worries, thanks Paulo!
The best video for script setup 😎✨
Thanks Adi! 👍
Thanks you Danny
You're welcome, Johan!
Nice video. Thanks
Thanks Enrique!
Thanks much!!!, subscribed
Thanks for the sub!
Thanks a lot for this video. I have been struggling really hard to understand Vue3 JS, since I am very new to Vue. Most of the tutorials available using the composition API but not
With your video, now I understood the concepts.
Thanks again
Glad it helped, Nordic!
Best way to progress from old feature to new.We hope to see same kind of video where you show old way of doing and new way in the future.
Thanks Kismat!
I agree. I’m a react user and I’m new in vue. I hate the old script format. I was introduced by my supervisor to use Script Setup format but I’m having a hard time due to lack of YT tutorials. This is really helpful. Keep doing this.
@@MacroHAX Thanks!
Great vid, Danny! Hope you're doing well.
If you're only using props and emits in the template and not in the script section, you dont have to assign it to a variable at all. Just run the defineProps and deineEmits methods in the script when the component loads.
also, for some reason when importing a child component, you can choose to use kebab-case instead of PascalCase/camelCase when using the component in the template. eg:
import MyChild from '@components/MyChild.vue'
Not sure if this has always been a Vue thing but I just stumbled on it recently.
It's really interesting to see how clunky vue 3 was pre and how much it has improved over the past year. The setup function was the reason I was reluctant to switch from Vue 2. It's great to see how less verbose Vue is becoming!
Thanks Brandon! Good point about not needing a variable! Yeah, I wish composition api had come out of the gate with script setup, I think a lot more people would've been on board with it!
@@MakeAppswithDanny Yeah for sure, man!
I think the shifts from vue2 -> vue3 composition api -> vue3 is going to be quite confusing for new developers to vue. I'd imagine Stackoverflow results must be quite a mess for anyone starting out. In that respect, it's really great that you are making content like this to help!
thank you very much
No worries!
I would like to see a Nuxtjs course from Danny, hopefully Danny move some attention to Nuxtjs 🙏
I actually come from Nuxt v2 and was so happy to find Quasar, which I meanwhile favor over Nuxt.
@@RobertWildling @Mask Man. I may take a look at some point 👍
nice video, good job my friend
Thanks Duong!
Thnaks.
You're welcome Gergely! 👍
great video thanks!
Glad you liked it!
@@MakeAppswithDanny why you stopped making youtube videos? Your last video is a year old?
@@MrKnowledgeShare It was unmanageable while I was working on my app Fudget 2, with old fashioned editing tools. However, I can work on Fudget 2 less now and have found much better editing tools. So, watch this space! 👍
Thank you Danny! Excellent tutorial (as usual) 👌
I'm fairly new to Vuejs 3, which I like a lot as far. But coming from Ruby on Rails, and its DRY philosophy, Vuejs can be quite verbose, with (annoying) repeats, especially in the setup. So I'm very happy with the new script setup way!
It's a thing of beauty, Herve
very nice
Thanks!
Always a very reqarding adventure to watch your videos, Danny! Singend up for your course, which I am very much looking forward to. (Any chance you could integrate a register/login/authenticate chapter?) - Since you use Vite now and Quasar supports Vite, too, will you port your Fudget 2 to Vite? And if so, do you plan to provide a video about that to your INCREDIBLE Fudget 2 video series?
Yeah maybe I could do the Vite switchover video, it would be good as webpack is getting a bit slow as the app is so complicated. I've already recorded all of the videos (we're just editing now) and there is no back-end stuff included. I might be persuaded to add a bonus lecture in the future if a lot of people are requesting it. I'll have to see how the course does 👍
Nice 🚀
Thanks 🔥
Great video !!!
And amazin course on udemy
Thanks Ismael!
I liked 👍🏻
Thanks Ninoo!
U should include lifecycle methods...the topic is often overlooked in vue3
Thanks Avi. Lifecycle hooks are in the course. They're also gonna be covered here on TH-cam in the free portion of 8 videos I'll be sharing soon 👍
Really helpful! But I was wondering if people would do everything (eg defining their methods) inside setup back in the Vue 2 days?
No, setup came with Vue 3 really (although there were Composition API plugins for Vue 2 later on). Vue 2 was all options API.
Awesome as always but without the daft music track would be even better 😊
Thanks Gav. Nah, mate. It's a banger! 😂
@@MakeAppswithDanny AHAHAHA. You're mint you like. Nice that you replied. Keep going. Learning tons!
nice explanation video, thx. like this one!
ps. Danny, use Meta+/ or Ctrl+/ ;)
hahaha I was thinking that every time he was commenting stuff out. It felt like a subtle form of punishment to watch.
@@brandonsayring Haha yeah I do normally use the shortcut, I'm not sure why I didn't here 😂
I remembered why I wasn't using the comment shortcut, it was messing up my formatting after I uncommented, so it was quicker to just comment manually than to fix all the formatting 👍
excelenthe
Thanks 👍
We miss you boss
Thanks man. Yeah it's been a while 👍
@@MakeAppswithDanny Thanks for all you do for the ecosystem, been working heavily with quasar myself
@@emmanuelnwabuodafi6415 Thanks. Quasar is great!
Great comparaison,
I would just suggest you to increase the font size of your editor. It’s very tiny even at 1080p.
Beside that, nice video.
You’re right, I usually increase it more but forgot on this one… 🤦♂️
I absolutely love your videos but I wish they were more mobile friendly. It's Impossible to view them from the phone due to the code being too small. I'd suggest zooming in on the code and ditch split screen entirely. Just some viewer feedback
Most coding videos are like that.
This is great! Thank you Danny.
One question: How is Quasar affected by this change?
Smooth transition, as Quasar v2 was made entirely for Vue 3. And activating doesn't need any big configuration. And what also was introduced withe is using Vite as default CLI, so in the meantime Quasar supports vite in v3, we can use the Quasar Vite Plugin, so we can first create a Vite project and then add Quasar as dependency. No boot files required.
Yeah like Angel said. You should be able to use in a new Quasar project, just the way I've shown here 👍
Niceeees
Thankeeees Candra! 👍
Hi Danny. I just subscribed! Thanks for the awesome video. Do you possibly know using ref to invoke(or access to the) child component's function is still the same way? or do I need to use defineExpose ? Looks like after changing to , My parent component lost the access to the child component's function.
Yes, you need to use defineExpose when using script setup 👍
@@MakeAppswithDanny Great! Thank you!!!!
ALT+SHIFT+A , I'll just leave that here :)
😂 the comment shortcut was messing with my (unusual) formatting 👍
@@MakeAppswithDanny I see! I was like... "please, shortcuts, please... please"! :D
Welcome back Danny and thanks. Script setup is so awesome. Long time that I wasn’t warned about a video posted by you. It’s great to see you back. If I may I would like to add a point about a much convenient way to defineProps with TypeScript in my opinion. It is exposed in here : th-cam.com/video/SMGdokqKEuY/w-d-xo.html
Thanks Jean-Philippe! Good to be back! Ooh, nice! 👍
Do you have a tutorial for user permission with laravel api and vue separate front?
Hi Sanjaya. No, I don't have any Laravel tutorials.
Hey I love your vids Danny, but the little left hand popup appeal to subscribe derails my attention. It seems to have lost the scratchy audio for it which is an improvement.
The quality of your work and your spoken appeals to subscribe I find much more appealing- hence why I'm subscribed. Make of that what you will :) thanks for your great content.
Thanks Eamonn I'll keep that in mind. If more people complain, I'll consider removing it 👍
I see quasar using `export default defineComponent({` same changes can be applied to this type of script part?
I think it should still work if you leave that in. I'm not certain though, I always remove that...
Though I love your tutorial - what about injection?
Thanks. What do you mean? Provide / inject? What about that?
is there a vscode extension for the script setup / syntax highlighting? I am loving the script setup patterns so far but it's bugging me that my variables/component imports/methods are not "highlighting" and reading as "value declared but never used" thanks!
Yes Mark, I think you want the Vetur Extension Pack. It’s a bit tricky to find, search the exact phrase then scroll down quite a bit. Edit: actually that’s wrong, it’s the Volar Extension Pack: marketplace.visualstudio.com/items?itemName=MisterJ.vue-volar-extention-pack
Not sure if you said it but the new course will be using the script setup?
Yes it will Nicholas. Early on I will demonstrate Options API, then Setup Function, then Script Setup. Then for the rest of the course it’s Script Setup 👍
Super lovely. Do you think you will talk about backend like mongo and node in the future? Im a beginner
question , is quasar ready to work with script setup ? is there any video ?
Yeah Leandro, Quasar is all good to go for script setup! You can use it in exactly the same way as here (with newly created Quasar 2 projects) 👍
can you explain how can we use created hook in script setup in vue 3?.
This is explained in my Vue 3 Composition API Tutorial series: th-cam.com/play/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T.html
thankyou...
How do you alias your imported components from "MyComponent" to 'my-component-or-whatever'?
This happens automatically in Vue. You can use either PascalCase or dash-case. So if you import MyButton.vue you can use:
or
@@MakeAppswithDanny That is cool!
One question Danny, can I make somehow multiple refs in the same line? I have tried "const aux1, aux2, aux3 = ref('');" and it doesn't work.
Thanks for the gread tutorial :)
Thanks. I think you would need to do it like:
const aux1 = ref(''), aux2 = ref(''), aux3 = ref('');
@@MakeAppswithDanny Thanks for the quick answer! Its still a bit redundant but a guess is a good price to pay for such a cool reactivity
Can you destructure the define props?
const { text } = defineProps({ ... })
should remove the need for props.text
Good question Simonas, I haven't tried it. Did you try it?
Not yet, haven't used Vue 3 yet... No time to migrate a 4 year project
Your suggestion worked for me, Simonas. 👍
@@megalofauna love it when a plan comes together...
Script Setup is cool, however none of the help topics you find use it. So it's really a pain finding something like how tu use nextTick() within script setup. Also how do you replace this and $ in script setup?
I know, right Paraluna? This is all covered in my Vue 3 Composition API Tutorial Series: th-cam.com/video/3B0ry4GI1cE/w-d-xo.html
There are 4 hidden videos in your "Vue 3Tipps & Tricks" - may I ask why?
Hey Robert. These are queued up for later, so that (after the course launch) I can get back to working on Fudget 2, while still having some content released over the next 2-3 months. These videos are:
- Best VSCode Setup for Composition API (Vue 3)
- What is a Composable? (Vue 3)
- What is State Management? (Vue 3)
- Vuex vs Pinia vs Composables (Vue 3 State Management)
@@MakeAppswithDanny Thank you for your quick reply!
the music in the transitions is too loud...
It absolutely boggles my mind how many youtubers I see not using any keyboard shortcuts for coding. Like... you're being so incredibly inefficient in your output it drives me nuts lol
If you mean the commenting, using the shortcut was messing up my indentation 👍
@@MakeAppswithDanny no not commenting, even just tab to autocomplete method or function calls. So many times you're typing out a function name, getting it wrong, starting over, when it's literally a 1 or 2 key press, then tab to autocomplete that method call.
Obviously this isn't a reflection of your actual tutorial, but it such a pet peeve of mine hahaha
ctrl + /
😂 I know. I'm still not sure why I didn't use that in this video. I do in my every day... 🤦♂️
@@MakeAppswithDanny same here, i ask my friends to use shortcuts yet i find myself not using it. LOL
@@sasg87962 I remembered why I wasn't using the comment shortcut, it was messing up my formatting after I uncommented, so it was quicker to just comment manually than the fix all the formatting 👍
still prefer the old way
Love your tutorials, but had to turn this one off because of the music. Please don't.
Thanks for the feedback Paul. But most of my videos have music right?
I don't think this is a good idea. sure you have less lines, but it's less human readable
Try it out on some projects and see what you think 👍
Vue 3 is such a rubbish! I really turned from absolutely loving it in version 2, to completely hate every single piece of it in version 3!
I feel you. I didn't like it at first. But having created an extremely complicated app with it (Fudget 2, coming soon: www.fudget.com) I have to say I love it now. The codebase is a lot more organised and concise with Vue 3, which will make maintenance & adding new features so much easier 👍
this video for kids
Kids like you ;)
Uhhh... whut? 🤷♂️
this is awesome. auto subscribe.
Thanks & welcome, Rian!