Personalizing for interest: vue3 and complexity: intermediate. Manage your personalisation profile.
my name is Tim Benniks and this is aturbo tutorialso in this tutorial we will have a lookat how you can make your own composablein few three and so composables areamazing pieces of Kit to kind ofabstract pieces of code you might reuseall over the place and so theycompletely replace mixins and thingslike that from the Q2 era and they aregreat so let's have a look at this codeto show you what I've done and how youcan also do this stuff so as you can seehere this is this is basically just afew three out of the box simpleum app nothing done to it no weirdconfigurations nothing and so basicallythere's a bunch of stuff that'scommented out that's for step two sowe're going to start simple so I have acompletely synchronousum composible here and this is usefriends line and the idea is because Ilike the TV show Friends so that's whythis is in hereum I want to get the line of somebody inthat TV show based on their name and Ilike that scene where they're breakingup so where Ross and Rachel are on abreak and so I have made a linecomposable and you can see use friendsline there's always use in front ofcomposable and that line just thenbecomes whatever that composable returnsin this instance and then you just showthat line on the page so in this case Ididn't add anything and it defaults toRoss so let's cool off let's get somefroze yogurt or something that's what hesays and so I can also say you know whatgive me Rachelthen maybe we should take a break so howdoes this actually look so they alwayslive in the composables folder and hereis your use friends line and I'm usingref here because what I want to returnfrom this composable in what I want touse this for should actually besomething reactive so that that's whyyou use the ref here and so I have somelines from Rachel maybe we should take abreak and we have Ross let's cool offblah blah blah you probably know thisscene and if you're too young check outfriends on Netflix it's really fun andso basically you export a functionthat's the same name as your file nameand you don't have to do that but thisis kind of like this is the the way mostpeople do it it's kind of the way fewwants you to do it and I literally inthis case I get who so Ross or Racheland the default is Ross here and itliterally just finds inside this arraywhat that actor is and Returns the nameor Returns the Line This is extremelysimple but it's just just to show youand so it just grabs something from thatlist based on the name shows you theline there you go so I can do Rachel orI can do Ros and when I hit save nowthis is actually dynamically updatedbecauseum it's a ref it's really nice okay sothis is a relatively simple one it couldalso be that you're doing a lot of Ajaxcalls all over the place and if that'sthe case you might want to go to nextand do other things but imagine you'rein few right you can actually make a usefetch composable yourself you couldprobably also get that from the few useLibrary which is amazing but that's foranother video so let me just import theuse fetch composable that I've madeand thenshow you all the things so basicallyhere I'm using use Fetch and what comesback from usefetch in this case is adata property and there might also beother things coming back because ofum whatever you want like errors orloading States things like that and sohere I'm actually querying an API pointthat I have for my own conference talksfor my press kit website and I'm justlimiting it to one result so let's havea look so basically what came back isone conference which I'm speaking atnext week and so basically let's have alook at how this works so in this caseI'm again grabbing ref from few and soI'm doing a few things hereI'm exporting the use fetch system andor the name of the composable sorryabout that so I have a data ref and anerror ref in this case so I'm fetchingthe URL that I'm giving to use fetchthenI actually get a result back and becauseyou're using fetch itself you have tothen cast it to Json or to text whateveryou want to do in this case it's Jsonand then if it's good I'm actuallyadding data dot value is that Json andin this case because data is a ref ifyou want to set something in a ref youdo a DOT value and set it if there's anerror it actually sets the error so itreturns both data and error of course ifthere's no error and it stays null butif there is an error that is actuallysomething that's also returned so Icould do something like thisright I could get back that error anduse it and soit's that simple that's the way and ofcourse you can do async await and awhole bunch of other stuff here but thisis just to show you how easy this is andI can just say you know what let's limitit to three and see what comes out wellthere's three three of my upcoming talksof which one already happened and sothat is how easy it is to actually makecompostableum that's what I wanted to show you ifyou have any questions replies commentswhatever different opinion go to thecomments and tell me I'll see you in thenext one cheers
Learn how to make a composable
Learn how to make a Vue 3 composable.