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
👉 Vue 3 Composition API Course: https://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: https://dannys.link/compositionapi
👉 My Courses - https://dannys.link/courses
👉 Download Fudget: https://www.fudget.com
👉 My VSCode Setup - https://dannys.link/vscodesetup
👉 DONT CLICK THIS - https://dannys.link/dontclick
Видео Vue 3 Script Setup Tutorial - This Changes Everything! канала Make Apps with Danny
👉 Vue 3 Composition API Course: https://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: https://dannys.link/compositionapi
👉 My Courses - https://dannys.link/courses
👉 Download Fudget: https://www.fudget.com
👉 My VSCode Setup - https://dannys.link/vscodesetup
👉 DONT CLICK THIS - https://dannys.link/dontclick
Видео Vue 3 Script Setup Tutorial - This Changes Everything! канала Make Apps with Danny
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Best VSCode Setup for Composition API (Vue 3)](https://i.ytimg.com/vi/komWQ4HANF0/default.jpg)
![Vue 3 & Firebase 9 Tutorial (Cloud Firestore)](https://i.ytimg.com/vi/84mhLKUM04E/default.jpg)
![Vue 3 & Firebase 9: Huge Course Update!](https://i.ytimg.com/vi/6FhI6d-CbDM/default.jpg)
![What is State Management? (Vue 3)](https://i.ytimg.com/vi/358Vqjj-tC0/default.jpg)
![What is a Composable? (Vue 3)](https://i.ytimg.com/vi/h8yveYCbFQM/default.jpg)
![Learn Pinia in 30 MINUTES! (Vue JS 3)](https://i.ytimg.com/vi/JGC7aAC-3y8/default.jpg)
![New Course! - Vue JS 3: Composition API (with Pinia & Vite)](https://i.ytimg.com/vi/iOUcYu5P158/default.jpg)
![Vue 3 Composition API Tutorial #8 - Child Components](https://i.ytimg.com/vi/IEq4zVHhIMg/default.jpg)
![Vue 3 Composition API Tutorial #7 - Lists, Teleport & More](https://i.ytimg.com/vi/HXt6kRm5ZOo/default.jpg)
![Vue 3 Composition API Tutorial #6 - Vue Router](https://i.ytimg.com/vi/UCI9dO4Vxvk/default.jpg)
![Vue 3 Composition API Tutorial #5 - Directives](https://i.ytimg.com/vi/JNLIsGqULe8/default.jpg)
![Vue 3 Composition API Tutorial #4 - Lifecycle Hooks](https://i.ytimg.com/vi/Vpo_4si5Fb0/default.jpg)
![Vue 3 Composition API Tutorial #3 - Methods, Computed & Watch](https://i.ytimg.com/vi/auWgiWH1D1U/default.jpg)
![Vue 3 Composition API Tutorial #2 - Data, Refs & Reactive Objects](https://i.ytimg.com/vi/Nxs-AQW5jCM/default.jpg)
![Vue 3 Composition API Tutorial #1 - Options API vs Composition API](https://i.ytimg.com/vi/3B0ry4GI1cE/default.jpg)
![What is the Composition API? (Vue 3)](https://i.ytimg.com/vi/cDr2G3d0OZw/default.jpg)
![Create a Menubar App with Electron & Quasar (for Mac & Windows)](https://i.ytimg.com/vi/DnGlkZ2eXlg/default.jpg)
![Quasar Framework is Amazing!](https://i.ytimg.com/vi/VMskuNmQBqE/default.jpg)
![Quasar & Vue 3: Custom Icon Library - Part 2 (IconSets!)](https://i.ytimg.com/vi/na17MMNHwkM/default.jpg)
![Quasar & Vue 3: Create an Icon Library (Reduce Bundle Size by 50% - 70%!)](https://i.ytimg.com/vi/WWWEA9UGY3A/default.jpg)