I am so impressed by your energy to share your ideas on using typescript and vuejs. As a beginner front end developer, you are conveying concepts so easily. Thank you for your work and hope seeing more good contents on skills.
Thanks for the great work! I especially appreciate your effort in helping Ionic support Vue. These videos are just as helpful. They're simple and easy to digest. More Vue 3 stuff, please!
Thank you @Ibrahim! In the spirit of the Open Source movement, please feel free to share our content with your network and help us spread knowledge. :)
Could you please explain why you're using ref here: 2:55 I thought ref is for scalar types like bool, number, string, and reactive is for objects. And response is most likely an object or array. Or am I wrong?
Thank you so much for your amazing support, Angel! Another video coming up next week. This will be a server side rendering experiment that I really enjoyed working with. I hope you like it, too
Thank you Janne. I'm glad this makes sense for you. As far as error handling, I'd consider using the Error boundary. I covered that briefly in this video: ruclips.net/video/LvOYCjpMQ10/видео.html
@@grgurgrisogono656 just watched all the rest of your videos on Vue 3 :) Regarding error handling, have you checked Posva's vue-promised? github.com/posva/vue-promised
@@JanneKurkinen I really like what Eduardo has done with Promised. I believe it's a great idea and it helps reduce the boilerplate by a great deal. IMHO the primary difference between a universal error boundary and per-use error handling (e.g. w/ Promised) is in how you want to handle errors. Error boundaries let you have a single point of error display and handling, whereas with Promised you can show errors in different places where they are needed. I don't think there's the right or the wrong approach in this. I would advise the UX designer(s) and the Product Owner of the possibilities so they have a good foundation for the final decision. Thank you for that question and for your amazing support ❤️😉
@@grgurgrisogono656 if you'd like to take on a challenge, and which I think would be really interesting video topic also... I've battled this myself, coming from Angular background 2- y ago, and as this guy is also experiencing here with his 'onboarding'...getting the linting & formatting setup configured is rather bad DX still at the moment (at 5:07): ruclips.net/video/f4-DHVZKrXU/видео.html I have an open SO question about this: stackoverflow.com/q/60187885/2442714 And here's a related issue in Vetur repo: github.com/vuejs/vetur/issues/2315
Thanks, Max! I get this question a lot and maybe I should create a gist or something with my VS Code settings. The truth is, I'm never satisfied enough with my setup 😅 The font I use is Operator Mono Book with custom Ligatures. That basically means that I had to modify the font to add custom symbols for expressions like === or !=. As far as the theme, I use a modified version of Dracula. I only modified a few colors so that they are more evenly spaced out through the color wheel. I use more extension that I would like and I constantly go over them in the effort to uninstall. Then I realize - hey I need them all 😂 I'll go ahead and publish my setup and I'll let you know here (and I'll post on my Twitter - @ggrgur) I appreciate your support!
At 8:14, I don’t get why you create/initialize the “loaded” variable on line 7 and then check its value on line 9. Its set to false on line 7 so it will always be false, won’t it? When will ot ever be true?
Good question. Line 11 sets it to true after a successful request. It's just a simple way to make sure the request is loaded just once, especially when reusing the same hook in multiple places. . Your production code should hopefully be more versatile. This is just for demonstration purposes.
Thanks. I heard you say that in the video as well, but still I’m missing something. Anytime useProducts is called, won’t line 7 run and set loaded to false? Or is something special happening there? ... i think Im not getting this because I’m missing the overall purpose of the video... I need a diagram! Ha.
Unfortunately, VSCode does not leverage the type-safety of defineComponent(); the intellisense fails to suggest methods and computed properties. I tried both Volar and Vetur.
Love your content! Keep it coming! I tried Suspense wrapping a router-view tag, but didn't seem to work well on route changes.. perhaps VueRouter doesn't support that yet? Console says Suspense is experimental
Hey learning lots about TS and Vue from your vids! thank you :) questions, is typing vue refs with like the way you did it: const response: Ref = ref(); the same as: const reponse = ref() I have been doing it the latter way...
Thanks Alex, it's great to know that you've found good value in these videos. Keep watching! as for typing refs, I've used multiple ways throughout the videos just to show that there are multiple possibilities. However, I believe using generics the way you described is the way to go. So it's ref() . You're doing it right and it can save you from running into weird issues later.
@@mclotos You're right, it's been too long. However, I've been working on some incredibly interesting stuff that I can't wait to share! I think Vite is fantastic, but I'm afraid I haven't been able to take a deep dive, yet. What about you? What are your thoughts?
Learning Vue 3 TypeScript with class feature enabled and have converted this example that gets called via classes - can be found here github.com/vahidhedayati/vue3class
I am so impressed by your energy to share your ideas on using typescript and vuejs. As a beginner front end developer, you are conveying concepts so easily. Thank you for your work and hope seeing more good contents on skills.
I love this dynamic type defining with generic very much!!
right? Generics are the best!
Thanks for the great work! I especially appreciate your effort in helping Ionic support Vue. These videos are just as helpful. They're simple and easy to digest. More Vue 3 stuff, please!
How come you have just 2.4k subscribers? You deserve way more!
Thank you @Ibrahim! In the spirit of the Open Source movement, please feel free to share our content with your network and help us spread knowledge. :)
Wow, thanks Ibrahim, your support means the world1
Great explanation and valuable information
We look forward to more lessons at Vue 3
Thank you for sharing the love! 🙌
Could you please explain why you're using ref here: 2:55
I thought ref is for scalar types like bool, number, string, and reactive is for objects. And response is most likely an object or array. Or am I wrong?
Please, do more videos about Vue 3
I has viewed all the reproduction list
Thank you so much for your amazing support, Angel! Another video coming up next week. This will be a server side rendering experiment that I really enjoyed working with. I hope you like it, too
Neat! Gonna refactor my typed API wrappers with similar solution... Path constants and error handling needed still.
Thank you Janne. I'm glad this makes sense for you. As far as error handling, I'd consider using the Error boundary. I covered that briefly in this video: ruclips.net/video/LvOYCjpMQ10/видео.html
@@grgurgrisogono656 just watched all the rest of your videos on Vue 3 :)
Regarding error handling, have you checked Posva's vue-promised? github.com/posva/vue-promised
@@JanneKurkinen I really like what Eduardo has done with Promised. I believe it's a great idea and it helps reduce the boilerplate by a great deal.
IMHO the primary difference between a universal error boundary and per-use error handling (e.g. w/ Promised) is in how you want to handle errors. Error boundaries let you have a single point of error display and handling, whereas with Promised you can show errors in different places where they are needed. I don't think there's the right or the wrong approach in this.
I would advise the UX designer(s) and the Product Owner of the possibilities so they have a good foundation for the final decision.
Thank you for that question and for your amazing support ❤️😉
@@grgurgrisogono656 thanks for the answer! ❤️
@@grgurgrisogono656 if you'd like to take on a challenge, and which I think would be really interesting video topic also...
I've battled this myself, coming from Angular background 2- y ago, and as this guy is also experiencing here with his 'onboarding'...getting the linting & formatting setup configured is rather bad DX still at the moment (at 5:07): ruclips.net/video/f4-DHVZKrXU/видео.html
I have an open SO question about this: stackoverflow.com/q/60187885/2442714
And here's a related issue in Vetur repo: github.com/vuejs/vetur/issues/2315
I obliterated that like button, please do more Vue 3 + TS videos.
Thank you so much, buddy, I'm humbled. I'll be posting more stuff, thank you for supporting us!
Hi! Great video, simple and useful.
Is there somewhere a description of your VS Code setup? Like theme, fonts, extensions etc.
+1, I am also interested in knowing what font and theme extension are used in there.
Is the font "Cascadia mono" from Microsoft ?
Thanks, Max!
I get this question a lot and maybe I should create a gist or something with my VS Code settings. The truth is, I'm never satisfied enough with my setup 😅
The font I use is Operator Mono Book with custom Ligatures. That basically means that I had to modify the font to add custom symbols for expressions like === or !=.
As far as the theme, I use a modified version of Dracula. I only modified a few colors so that they are more evenly spaced out through the color wheel.
I use more extension that I would like and I constantly go over them in the effort to uninstall. Then I realize - hey I need them all 😂
I'll go ahead and publish my setup and I'll let you know here (and I'll post on my Twitter - @ggrgur)
I appreciate your support!
At 8:14, I don’t get why you create/initialize the “loaded” variable on line 7 and then check its value on line 9. Its set to false on line 7 so it will always be false, won’t it? When will ot ever be true?
Good question. Line 11 sets it to true after a successful request. It's just a simple way to make sure the request is loaded just once, especially when reusing the same hook in multiple places. . Your production code should hopefully be more versatile. This is just for demonstration purposes.
Thanks. I heard you say
that in the video as well, but still I’m missing something. Anytime useProducts is called, won’t line 7 run and set loaded to false? Or is something special happening there? ... i think Im not getting this because I’m missing the overall purpose of the video... I need a diagram! Ha.
Unfortunately, VSCode does not leverage the type-safety of defineComponent(); the intellisense fails to suggest methods and computed properties. I tried both Volar and Vetur.
Love your content! Keep it coming!
I tried Suspense wrapping a router-view tag, but didn't seem to work well on route changes.. perhaps VueRouter doesn't support that yet?
Console says Suspense is experimental
Here's how you can wrap router in Suspense:
Sample code here: github.com/moduslabs/vueport-shop/blob/master/src/App.vue
@@grgurgrisogono656 great thanks!! I'll try that!
when is the next video?
Hey learning lots about TS and Vue from your vids! thank you :)
questions, is typing vue refs with like the way you did it:
const response: Ref = ref();
the same as:
const reponse = ref()
I have been doing it the latter way...
Ref = type of ref
ref() is= actual reference
Thanks Alex, it's great to know that you've found good value in these videos. Keep watching!
as for typing refs, I've used multiple ways throughout the videos just to show that there are multiple possibilities. However, I believe using generics the way you described is the way to go. So it's ref() . You're doing it right and it can save you from running into weird issues later.
@@grgurgrisogono656 cool thanks for clarifying !
T is a generic type in typed languages like java. I think that It's used in the same way in TypeScript.
Good job!
Thanks
Amazing!!!
Thanks for watching!
Hello! When will be video about teleport?
Sure, I can record a Teleport video for you. Thanks for watching!
@@grgurgrisogono656 so 6 months have passed =)
What You think about Vite? =)
@@mclotos You're right, it's been too long. However, I've been working on some incredibly interesting stuff that I can't wait to share!
I think Vite is fantastic, but I'm afraid I haven't been able to take a deep dive, yet. What about you? What are your thoughts?
@@grgurgrisogono656 the Vite better than webpack and others, i think. But some functionality must have more detailed documentation =)
Learning Vue 3 TypeScript with class feature enabled and have converted this example that gets called via classes - can be found here github.com/vahidhedayati/vue3class
This "italic" font is terrible to read :(