Vue.js Advanced Data Provider Component Patterns Explained

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

👉 Sign up and get free Vue cheat sheets and updates!

Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out

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

* this video was sponsored by VuejsNation! Thanks Vuejs nation!

[ProgramWithErik]

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!

[MrSanya]

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:
<template>
<slot :res="response" :loading="loading" />
</template>

As for me, it is a bit simpler than context usage.

[abdallahalsahhar]

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

[andrewananenko]

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

[kaibe]

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

[andrewananenko]

Maybe i am wrong, but why use this way if we have <Suspense> with default slot and #fallback for loading indicator? <Suspense> does the same but greatly easier. Thank you for the video!

[cnikolov]

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

[Technologism]

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

[binodnepali]

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

[emmyleke]

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

[volodymyrkozliuk]

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

[JanisWalliser]

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.

[Shmidtelson]

Bro why are you using any type with props?

[MilenkoCurcin]

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

[MartinOmander]

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.

[chris_ea]

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

[josehermosillarodrigo]

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: <template> <slot v-bind="{ ...your_data... }" /> </template>

[brokula]

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.

[ignisAnimus]

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

[richardstiller]

Vue has good concepts, if it avoid its vue files, it will be useful.