Vue.js Advanced Data Provider Component Patterns Explained

Program With Erik
Program With Erik
22,822
0
Published 2022-01-14
🚨 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 Vue.js 3 Compo...  

👉 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/erikhanchett/

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/4fc18bec5f20b42b6a07f596611…
gist.github.com/ErikCH/5185adc78033fda37062291ea26…

* this video was sponsored by VuejsNation! Thanks Vuejs nat
All Comments (21)
  • @ProgramWithErik
    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
  • @abdallahalsahhar9511
    about a week ago spent a day trying to do renderless script setup with no success, Thanks a lot @Erik
  • @kaibe5241
    Pretty interesting way of managing data requests, but I think I'll stick to my domain repositories.
  • @MrSanya789
    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.
  • @binodnepali
    Hey Erik, do you have a video about your VIM setup in VS code?
  • @Technologism
    What theme or extension do you use to make the function name so bright
  • @andrewananenko797
    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
  • @emmyleke7049
    Hi Erik, what text extension do you use on VSCode that makes your arrow functions look like arrows.
  • @MilenkoCurcin
    Can you also create an example with posting data instead of fetching? A great video, btw
  • @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.
  • @chris_ea
    Can you show a example by using axios instead of fetch?
  • @josehermosillarodrigo1795
    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: