vuejsnation.com/ The first 100% FREE Vue.js Conference is around the corner! 🎉 Join the @vuejsnation and explore the vast @vuejs ecosystem in 2022! Date: 26th & 27th January Tickets: FREE ✅ Interact with industry leaders LIVE including Evan You and Sebastien Chopin!
internal data provider like this ive seen in vue3 ui libraries, like naiveui and elementplus i think. "config provider" , the concept is the same i guess?
Hi Erick, thanks for the video. I used this pattern a lot on my current Vue 2 project and find it very useful. I always write it with template section like this: As for me, it is a bit simpler than context usage.
Maybe i am wrong, but why use this way if we have with default slot and #fallback for loading indicator? does the same but greatly easier. Thank you for the video!
Not so sure if I would call a component that literally uses the render function to render a slot "render less". Maybe I am missing something tho. Also one point not mentioned which I think counts for the composable way is that it is usable outside of Vue. E.g. in a App that is not Vue only you can still use that composable function just without reactivity.
Well, it's rendering a slot, which I feel like is enough to call it renderless. I Adam Wathan coined it, in his Advanced Vue course. Interesting, I haven't though of that definition of composable.
Why don't you just use a template tag to render the default slot and bind data? I think it's easily to work with, instead of dealing with render functions. Something like:
I appreciate seeing a new way of calling APIs. But why do extra work to put the fetch code in a component, instead of simply importing a util file which exports a plain old function? I'm genuinely curious.
I think he used it for the sake of explaining the concept i.e renderless components. I would still prefer plain old functions for api calls (I usually call them services) since they can be used anywhere in your js code and not just inside templates.
@@blank4157 Good point! I did some more online searching of why one might want to put code in renderless components, as this was a mystery to me. Some people say that renderless components are easier for UI developers to use. A Javascript developer would implement the component. Then a UI developer can add it to layouts by simply adding tags. Presumably they are more comfortable with HTML-like tags than with raw Javascript code. As I am more of a Javascript developer and less of a UI developer, it could be that this technique simply isn't aimed at people like me.
Great points already in the comments here, but as I said in the video, it could also be that you'd like to use the full power of Vue, and be able to Reactive variables, and lifecycle hooks and everything Vue has to offer. So wrapping it in a component makes sense. Being good for designers is another good point.
It's more of a hack than useful tool. Greatest drawback is that you are pushing the logic inside the template and by using slots you loose type safety....so rather just use plain ol' composition API.
vuejsnation.com/
The first 100% FREE Vue.js Conference is around the corner! 🎉
Join the @vuejsnation and explore the vast @vuejs ecosystem in 2022!
Date: 26th & 27th January
Tickets: FREE ✅
Interact with industry leaders LIVE including Evan You and Sebastien Chopin!
I had not heard of this conference before. Thanks for bringing it up in your video, Erik!
See you there
internal data provider like this ive seen in vue3 ui libraries, like naiveui and elementplus i think.
"config provider" , the concept is the same i guess?
about a week ago spent a day trying to do renderless script setup with no success, Thanks a lot @Erik
You are amazing, Erik. Thanks!
Hi Erick, thanks for the video. I used this pattern a lot on my current Vue 2 project and find it very useful. I always write it with template section like this:
As for me, it is a bit simpler than context usage.
That's an elegant way of doing it. Thanks for sharing!
Nice!
Pretty interesting way of managing data requests, but I think I'll stick to my domain repositories.
nice vid Erik!
Use fetch and the Utility lib looks very good, I would still wrap it to composable or something so I can use typescript to marry the types
That works!
Thanks Erik!
🏆 absolutely useable!!!!
Maybe i am wrong, but why use this way if we have with default slot and #fallback for loading indicator? does the same but greatly easier. Thank you for the video!
Sorry for question, What do you constantly try to look for aside?
Hey Erik, do you have a video about your VIM setup in VS code?
so helpful 👍
What theme or extension do you use to make the function name so bright
Not so sure if I would call a component that literally uses the render function to render a slot "render less". Maybe I am missing something tho.
Also one point not mentioned which I think counts for the composable way is that it is usable outside of Vue. E.g. in a App that is not Vue only you can still use that composable function just without reactivity.
Well, it's rendering a slot, which I feel like is enough to call it renderless. I Adam Wathan coined it, in his Advanced Vue course. Interesting, I haven't though of that definition of composable.
Can you also create an example with posting data instead of fetching? A great video, btw
Thanks sure!
Bro why are you using any type with props?
Why don't you just use a template tag to render the default slot and bind data? I think it's easily to work with, instead of dealing with render functions. Something like:
I used a renderless function witha v-slot. I then did it without the template tags. Look at 07:02
I appreciate seeing a new way of calling APIs. But why do extra work to put the fetch code in a component, instead of simply importing a util file which exports a plain old function? I'm genuinely curious.
I think he used it for the sake of explaining the concept i.e renderless components.
I would still prefer plain old functions for api calls (I usually call them services) since they can be used anywhere in your js code and not just inside templates.
@@blank4157 Good point!
I did some more online searching of why one might want to put code in renderless components, as this was a mystery to me. Some people say that renderless components are easier for UI developers to use. A Javascript developer would implement the component. Then a UI developer can add it to layouts by simply adding tags. Presumably they are more comfortable with HTML-like tags than with raw Javascript code.
As I am more of a Javascript developer and less of a UI developer, it could be that this technique simply isn't aimed at people like me.
Great points already in the comments here, but as I said in the video, it could also be that you'd like to use the full power of Vue, and be able to Reactive variables, and lifecycle hooks and everything Vue has to offer. So wrapping it in a component makes sense.
Being good for designers is another good point.
@@ProgramWithErik What you said about using reactive variables and lifecycle hooks makes sense. Thanks for the clarification!
Can you show a example by using axios instead of fetch?
Sure, maybe sometime in the future!
Hi Erik, what text extension do you use on VSCode that makes your arrow functions look like arrows.
I believe that is firacode font. I have been using it for a while and it looks great.
Any ligature compatible font will do, JetBrains Mono is by far my favorite.
I prefer managing it all in Vuex
Me too. Then any component can access the data that was fetched from the server.
I really like your brackets theme. What is it called?😀
Synthwawe
@@honza139706 thank you
It's more of a hack than useful tool. Greatest drawback is that you are pushing the logic inside the template and by using slots you loose type safety....so rather just use plain ol' composition API.
That's why I showed both ways, so it is good to compare and contrast.
this is like contextprovider in react
Nice idea, but I wouldn't do it that way.
Vue has good concepts, if it avoid its vue files, it will be useful.