Please Like, Share, Subscribe & Comment - it all helps me create more content! 👉 Vue 3 Composition API Course: dannys.link/compositionapi 👉 My Courses: dannys.link/courses
As someone who's just learning Vue now and is working on a Quasar project that was scaffolding without the script setup syntax, it was slightly tricky to figure out how to change all my components to use the script setup "sugar" . On the official Vue docs it does claim it improves performance and is easier to read through though
Hi Danny, in an older video i asked this question. I did not include the code because i was testing this video. Weird things are happening. In you code at timestamp you used "counter.value++" to increment the counter. What's odd are: (1) Howcome you could change the value of a "const"? (2) I used "this.counter++ and it still worked but i thought that this "this" should not be used. The script for HomeView.vue: - {{ counter }} + import { defineComponent } from 'vue' import { ref, reactive } from 'vue'; export default { setup() { const counter = ref('20'); const updateCounter = function (type) { if (type === '-') { this.counter--; } else { this.counter++; } }; return { counter, updateCounter, }; }, };
I just did some playing around and it seems that this works, but only when using the *setup function* pattern (like in your code) but it does not work when using the *script setup* pattern (which the pattern the Vue team now recommends). I assume the reason it works with the setup function pattern is because, in this context, the *this* keyword refers to the setup() function and since the counter ref is declared at the top level of the setup() function, *this.counter* will refer to it. However, I'm not quite sure why you don't need to do *this.counter.value* - that is strange. Honestly I don't know how to explain this right now, but I'll look into it. Regarding the *const* question, this is explained here: stackoverflow.com/a/23436563
@@MakeAppswithDanny Thank you for the reply. The reason i did that code is really i forget to change and as it worked i didnt think of it until i continued the video and when i had to add more code i realised the oddity. Hmmmm... Thank you for the explanation but it has serious implications. When someone change over from setup() to script setup. You are the only trainer who replies comments effectively . Keep up with the good work. Waiting for the full course in composition API. Will in be available in your site or udemy (my preference as i have so many courses in there as library).
I want to be successful like you Danny! I hope, I'll learn from you a lot! Please create course how to create MVP apps and earn like Indie App Developer. Because this is my dream.
It was the easiest one to install and use in a standard Vue project created with the Vue build tool (I wanted to stick with Vue build tool projects in the course). But it’s really not a Bulma course at all. We are just using it to make the app look pretty but not going into detail about Bulma. The focus is Vue 3 and composition api. 👍
@@MakeAppswithDanny There is of course a Quasar Vite plugin, but completely get your reasoning for the choices. Love your videos and look forward to purchasing this course when it is available. Keep up the great work!
![ARGENTINA vs. PERÚ [1-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 12](http://i.ytimg.com/vi/xtI25ENDDSY/mqdefault.jpg)
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 1](http://i.ytimg.com/vi/mV5bGIswTtQ/mqdefault.jpg)
![Vue 3 Composition API Introduction [FULL TUTORIAL]](/img/1.gif)
Please Like, Share, Subscribe & Comment - it all helps me create more content!
👉 Vue 3 Composition API Course: dannys.link/compositionapi
👉 My Courses: dannys.link/courses
Dude...you're off the charts with your awesomeness.
Cheers Doug!
Thank you Danny.
Amazing as always.
Can't wait for the full course
Thanks Basar!
thank you for the useful information related to vue.js
My pleasure, thanks ArlsonBek!
As someone who's just learning Vue now and is working on a Quasar project that was scaffolding without the script setup syntax, it was slightly tricky to figure out how to change all my components to use the script setup "sugar" . On the official Vue docs it does claim it improves performance and is easier to read through though
Yeah it took me a whole day to convert my app Fudget 2 to script setup. Definitely worth it though 👍
You are a great teacher🥰🥰
Thanks Mikael!
Hi! Thank you for explaining important topics.
No worries!
with what frequency videos will be adding to playlist?
thanks for your work
Aiming for every Monday, Wednesday & Friday. Next one tomorrow 👍
You are the best vue teacher thanks
Thanks Mishen! Got a Vue 3 & Firebase 9 Tutorial video dropping today (12pm UK time)
@@MakeAppswithDanny I'm waiting for it ❤, these days I'm doing your vue composition api with pinia course, really awesome sir, You are really great ❤
Thank you Danny
My pleasure Izor!
Hi, Danny! Wondering, how you are doing? Probably busy with family... how is your app going? Do you plan on any new tutorials?
I'm good cheers, Robert. Fudget 2 has been a full-time job so far, but hopefully when that gets a bit smoother I'll have time to do some videos 👍
@@MakeAppswithDanny Great to hear that your app is keeping you busy! Thanks for the quick reply!
New tune! I hope your new course does well!
The ONLY reason I haven't already bought it is...(heh heh)
Thanks Brandon!
you are the best airbender!
Er… I don’t know what that means, but thanks Sergio 😂
as always so wonderfull
Thanks Alfi!
Hi Danny, in an older video i asked this question. I did not include the code because i was testing this video. Weird things are happening. In you code at timestamp you used "counter.value++" to increment the counter. What's odd are: (1) Howcome you could change the value of a "const"? (2) I used "this.counter++ and it still worked but i thought that this "this" should not be used. The script for HomeView.vue:
-
{{ counter }}
+
import { defineComponent } from 'vue'
import { ref, reactive } from 'vue';
export default {
setup() {
const counter = ref('20');
const updateCounter = function (type) {
if (type === '-') {
this.counter--;
} else {
this.counter++;
}
};
return {
counter,
updateCounter,
};
},
};
I just did some playing around and it seems that this works, but only when using the *setup function* pattern (like in your code) but it does not work when using the *script setup* pattern (which the pattern the Vue team now recommends).
I assume the reason it works with the setup function pattern is because, in this context, the *this* keyword refers to the setup() function and since the counter ref is declared at the top level of the setup() function, *this.counter* will refer to it.
However, I'm not quite sure why you don't need to do *this.counter.value* - that is strange. Honestly I don't know how to explain this right now, but I'll look into it.
Regarding the *const* question, this is explained here: stackoverflow.com/a/23436563
@@MakeAppswithDanny Thank you for the reply. The reason i did that code is really i forget to change and as it worked i didnt think of it until i continued the video and when i had to add more code i realised the oddity. Hmmmm... Thank you for the explanation but it has serious implications. When someone change over from setup() to script setup.
You are the only trainer who replies comments effectively . Keep up with the good work. Waiting for the full course in composition API. Will in be available in your site or udemy (my preference as i have so many courses in there as library).
@@truthteachers it will be on Udemy. Link with my discount will be available on my site 👍
Any idea when the Udemy course will be available?
Hopefully in about 2 or 3 weeks 👍
@@MakeAppswithDanny Thanks! I'm looking forward to it! Love your classes!
Thanks for Amazing Video
Thanks AL! 👍
I want to be successful like you Danny! I hope, I'll learn from you a lot! Please create course how to create MVP apps and earn like Indie App Developer. Because this is my dream.
Thanks Яков! I'll think about it!
Group relevant code together you mean make spaghetti code like in React
Wow, unexpected) Danny, why Bulma? ))
It was the easiest one to install and use in a standard Vue project. It’s not a Bulma course though, I don’t go into detail about Bulma at all.
@@MakeAppswithDanny Got it) i'm in love with TailwindCss👍🏻
@@antonztxone Cool. Still haven't had a chance to play with Tailwind 👍
Hey Danny, where is new videos?
Hopefully once I'm done with Fudget 2 (hopefully soon) 👍
Where is Danny?
Hopefully I'll do some videos soon, Яков!
Any reason you are using Bulma over Quasar?
It was the easiest one to install and use in a standard Vue project created with the Vue build tool (I wanted to stick with Vue build tool projects in the course). But it’s really not a Bulma course at all. We are just using it to make the app look pretty but not going into detail about Bulma. The focus is Vue 3 and composition api. 👍
@@MakeAppswithDanny There is of course a Quasar Vite plugin, but completely get your reasoning for the choices. Love your videos and look forward to purchasing this course when it is available. Keep up the great work!