Vue 3 Script Setup Tutorial - This Changes Everything!

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

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

[MakeAppswithDanny]

Please Like, Share, Subscribe & Comment - it all helps me create more content for you!

[starkid]

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

[maskman]

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 🙏

[hamzazekri]

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

[albertliu]

man, didn't know the script setup was so powerful, you're tutorials are amazing

[anthonyngooo]

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)

[kismatkc]

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.

[theomegamale]

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!

[idolgin]

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.

[boian-inavov]

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!

[pi-dev]

This tutorial made me buy your new Vue 3 with Pinia course! Thank you, so helpful.

[MangoSent]

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!

[rafalka]

I've fallen in love with Vue again. Great tutorial!

[Unis]

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!

[MrWilde]

Actually my name is Bob and I am 49 :) Awesome videos Danny, very well explained and easy to follow. Love Your Work!

[augustoaraujorocha]

esse tutorial é o melhor do youtube atualmente, obrigado

[brandonsayring]

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:
<template>
<my-child />
</template>
<script setup>
</script>

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 <script setup> 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!

[nordicnomad]

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 <script setup>

With your video, now I understood the concepts.

Thanks again

[gavinworks]

Awesome as always but without the daft music track would be even better 😊

[TheFarahk]

This is great. I love how you show the old and the new making it very easy to follow along