Vue.js Advanced Data Provider Component Patterns Explained
Vložit
- čas přidán 27. 07. 2024
- 🚨 Check out this 100% free Vue.js conference! vuejsnation.com/
In Vue you can create renderless functions that provide a data access provider pattern. In this video we explain how to create one of those using Fetch. Then we compare it to the composition API with composables using the vueuse composable for Fetch. #vuejs
👉Check out my last video on why you don't need Vue.js Options API
• Why You Don't Need The...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech/
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
0:00 Introduction
0:37 Vuejs Nation
01:26 Fetch-json renderless component
08:19 Quick Tips on Slots
08:47 Composable Pattern VueUse
11:16 Bonus Bonus Bonus!
Links
vuejsnation.com/
gist.github.com/ErikCH/4fc18b...
gist.github.com/ErikCH/5185ad...
* this video was sponsored by VuejsNation! Thanks Vuejs nation!
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!
Pretty interesting way of managing data requests, but I think I'll stick to my domain repositories.
nice vid Erik!
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!
🏆 absolutely useable!!!!
Thanks Erik!
so helpful 👍
Hey Erik, do you have a video about your VIM setup in VS code?
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!
Sorry for question, What do you constantly try to look for aside?
What theme or extension do you use to make the function name so bright
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!
Can you also create an example with posting data instead of fetching? A great video, btw
Thanks sure!
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.
Can you show a example by using axios instead of fetch?
Sure, maybe sometime in the future!
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!
Bro why are you using any type with props?
I really like your brackets theme. What is it called?😀
Synthwawe
@@honza139706 thank you
I prefer managing it all in Vuex
Me too. Then any component can access the data that was fetched from the server.
this is like contextprovider in react
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.
Nice idea, but I wouldn't do it that way.
Vue has good concepts, if it avoid its vue files, it will be useful.