Vue.js Advanced Data Provider Component Patterns Explained

Подписаться 122 тыс.

Просмотров 23 тыс.

50% 1

🚨 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!

Опубликовано:

16 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 47

@ProgramWithErik 2 года назад

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!

@MartinOmander 2 года назад

I had not heard of this conference before. Thanks for bringing it up in your video, Erik!

@cnikolov 2 года назад

See you there

@Microphunktv-jb3kj Год назад

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?

@gideaoferreira8236 3 месяца назад

You are amazing, Erik. Thanks!

@abdallahalsahhar9511 2 года назад

about a week ago spent a day trying to do renderless script setup with no success, Thanks a lot @Erik

@kaibe5241 2 года назад

Pretty interesting way of managing data requests, but I think I'll stick to my domain repositories.

@MrSanya789 2 года назад

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.

@MartinOmander 2 года назад

That's an elegant way of doing it. Thanks for sharing!

@ProgramWithErik 2 года назад

Nice!

@DarylLegion 2 года назад

Thanks Erik!

@chris_ea 2 года назад

🏆 absolutely useable!!!!

@dmitriykret8938 2 года назад

so helpful 👍

@norielarguelles110 2 года назад

nice vid Erik!

@binodnepali 2 года назад

Hey Erik, do you have a video about your VIM setup in VS code?

@cnikolov 2 года назад

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

@ProgramWithErik 2 года назад

That works!

@andrewananenko797 2 года назад

Sorry for question, What do you constantly try to look for aside?

@andrewananenko797 2 года назад

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!

@Technologism Год назад

What theme or extension do you use to make the function name so bright

@MilenkoCurcin 2 года назад

Can you also create an example with posting data instead of fetching? A great video, btw

@ProgramWithErik 2 года назад

Thanks sure!

@JanisWalliser 2 года назад

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.

@ProgramWithErik 2 года назад

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.

@emmyleke7049 2 года назад

Hi Erik, what text extension do you use on VSCode that makes your arrow functions look like arrows.

@JesusMRamosPerez Год назад

I believe that is firacode font. I have been using it for a while and it looks great.

@charlesm.2604 Год назад

Any ligature compatible font will do, JetBrains Mono is by far my favorite.

@josehermosillarodrigo1795 2 года назад

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:

@ProgramWithErik 2 года назад

I used a renderless function witha v-slot. I then did it without the template tags. Look at 07:02

@chris_ea 2 года назад

Can you show a example by using axios instead of fetch?

@ProgramWithErik 2 года назад

Sure, maybe sometime in the future!

@rajikkali2381 2 года назад

I prefer managing it all in Vuex

@MartinOmander 2 года назад

Me too. Then any component can access the data that was fetched from the server.

@MartinOmander 2 года назад

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.

@blank4157 2 года назад

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.

@MartinOmander 2 года назад

@@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.

@ProgramWithErik 2 года назад

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.

@MartinOmander 2 года назад

@@ProgramWithErik What you said about using reactive variables and lifecycle hooks makes sense. Thanks for the clarification!

@Shmidtelson 2 года назад

Bro why are you using any type with props?

@glowiever 2 года назад

this is like contextprovider in react

@volodymyrkozliuk6811 Год назад

I really like your brackets theme. What is it called?😀

@honza139706 Год назад

Synthwawe

@volodymyrkozliuk6811 Год назад

@@honza139706 thank you

@ignisAnimus 2 года назад

Nice idea, but I wouldn't do it that way.

@brokula1312 2 года назад

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.

@ProgramWithErik 2 года назад

That's why I showed both ways, so it is good to compare and contrast.