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.
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.
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:
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?
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!
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!
nice vid Erik!
Sorry for question, What do you constantly try to look for aside?
Pretty interesting way of managing data requests, but I think I'll stick to my domain repositories.
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!
🏆 absolutely useable!!!!
What theme or extension do you use to make the function name so bright
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!
Hey Erik, do you have a video about your VIM setup in VS code?
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.
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.
so helpful 👍
I really like your brackets theme. What is it called?😀
Synthwawe
@@honza139706 thank you
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!
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
Can you show a example by using axios instead of fetch?
Sure, maybe sometime in the future!
Bro why are you using any type with props?
Can you also create an example with posting data instead of fetching? A great video, btw
Thanks sure!
I prefer managing it all in Vuex
Me too. Then any component can access the data that was fetched from the server.
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
Vue has good concepts, if it avoid its vue files, it will be useful.
Nice idea, but I wouldn't do it that way.