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
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!
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 🙏
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 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)
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.
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!
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.
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
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!
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!
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 👍
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.
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 👍
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!
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
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 👍
@@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! 👍
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.
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
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 :)
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.
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 : ruclips.net/video/SMGdokqKEuY/видео.html
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?
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)
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
@@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
@@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 👍
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 👍
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!
man, didn't know the script setup was so powerful, you're tutorials are amazing
Thanks Albert!
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!
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 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! 👍
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!
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!
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!
This tutorial made me buy your new Vue 3 with Pinia course! Thank you, so helpful.
Thanks, hope you enjoy the course!
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!
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!
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!
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 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 👍
esse tutorial é o melhor do youtube atualmente , obrigado
Uau! Obrigado Augusto!
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!
this is the best vuejs channel!
Thanks Raheel! 👍
This is great. I love how you show the old and the new making it very easy to follow along
Thanks Farah!
This one video is enough to understand all about script setup. Thanks
Thanks Masum! 👍
Thanks man your view is straight to the point an I love it
Thanks Chetan!
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!
Actually my name is Bob and I am 49 :) Awesome videos Danny, very well explained and easy to follow. Love Your Work!
Thanks Bob! 😂
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 RUclips soon 👍
Again a mindblowing, easy and great explanation, Danny.
Thank you so much!
Thanks Weller!
Fantastic and extremely valuable info! Liked and subscribed.
Thanks Sergio!
EXACTLY what i needed! well executed, thanks!
Thanks Armin!
Just awesome... excellant clarification 👌👌
Thanks Sanjay!
So glad I stumbled across your video :)
Thanks Duc!
Fantastic demonstration… :) thanks a ton
You're very welcome!
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 👍
The best video for script setup 😎✨
Thanks Adi! 👍
I Love the script setup, great video!
Me too! Thanks Andre! 👍
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.
Thanks for new knowledge.
My pleasure! 👍
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 RUclips in the free portion of 8 videos I'll be sharing soon 👍
Amazing and mind-blowing as always.
Thank you Danny!
Cheers Basar! 👍
Thank you so much for this video, really help me a lot.
No worries, Bru!
Great tutorial!
Thank you Ali!
Thank you very much Danny. ❤️
No worries, Khashayar!
Great content, help me a lot. keep it up 🔥🔥🔥
Great to hear, thanks!
Thanks you Danny
You're welcome, Johan!
Very clear, thank you!)
You are welcome!
Amazing! Thank you so much
My pleasure! 👍
As always - a great tutorial. Can't wait for more stuff and you course.
Thanks 👍
Great video, thank you.
No worries, thanks Paulo!
The music in the intro was so eerie, that I'm watching this video in my gas mask.
😂
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… 🤦♂️
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 👍
thank you so much tis was so clear from you
Great to hear, Walid, thanks!
Nice video. Thanks
Thanks Enrique!
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 👍
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!
Thnaks.
You're welcome Gergely! 👍
nice video, good job my friend
Thanks Duong!
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.
Thanks much!!!, subscribed
Thanks for the sub!
thank you very much
No worries!
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 👍
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
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
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
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: ruclips.net/p/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T
thankyou...
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! 👍
Though I love your tutorial - what about injection?
Thanks. What do you mean? Provide / inject? What about that?
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) 👍
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!!!!
Great video !!!
And amazin course on udemy
Thanks Ismael!
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...
very nice
Thanks!
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
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
Nice 🚀
Thanks 🔥
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!
excelenthe
Thanks 👍
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
I liked 👍🏻
Thanks Ninoo!
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 👍
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...
Niceeees
Thankeeees Candra! 👍
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 : ruclips.net/video/SMGdokqKEuY/видео.html
Thanks Jean-Philippe! Good to be back! Ooh, nice! 👍
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: ruclips.net/video/3B0ry4GI1cE/видео.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!
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?
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
the music in the transitions is too loud...
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 👍
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 👍
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 👍
this video for kids
Kids like you ;)
Uhhh... whut? 🤷♂️
this is awesome. auto subscribe.
Thanks & welcome, Rian!
This video is Extremely helpful! I love it! Thank you Danny!
Glad it was helpful, S!