Turbo Tutorial | Vue 3: Learn how to make a composable

my name is Tim Mannix and this is a turbo tutorial so in this tutorial we will have a look at how you can make your own composable in few three and so composables are amazing pieces of Kit to kind of abstract pieces of code you might reuse all over the place and so they completely replace mixins and things like that from the Q2 era and they are great so let's have a look at this code to show you what I've done and how you can also do this stuff so as you can see here this is this is basically just a few three out of the box simple um app nothing done to it no weird configurations nothing and so basically there's a bunch of stuff that's commented out that's for step two so we're going to start simple so I have a completely synchronous um composible here and this is use friends line and the idea is because I like the TV show Friends so that's why this is in here um I want to get the line of somebody in that TV show based on their name and I like that scene where they're breaking up so where Ross and Rachel are on a break and so I have made a line composable and you can see use friends line there's always use in front of composable and that line just then becomes whatever that composable returns in this instance and then you just show that line on the page so in this case I didn't add anything and it defaults to Ross so let's cool off let's get some froze yogurt or something that's what he says and so I can also say you know what give me Rachel then maybe we should take a break so how does this actually look so they always live in the composables folder and here is your use friends line and I'm using ref here because what I want to return from this composable in what I want to use this for should actually be something reactive so that that's why you use the ref here and so I have some lines from Rachel maybe we should take a break and we have Ross let's cool off blah blah blah you probably know this scene and if you're too young check out friends on Netflix it's really fun and so basically you export a function that's the same name as your file name and you don't have to do that but this is kind of like this is the the way most people do it it's kind of the way few wants you to do it and I literally in this case I get who so Ross or Rachel and the default is Ross here and it literally just finds inside this array what that actor is and Returns the name or Returns the Line This is extremely simple but it's just just to show you and so it just grabs something from that list based on the name shows you the line there you go so I can do Rachel or I can do Ros and when I hit save now this is actually dynamically updated because um it's a ref it's really nice okay so this is a relatively simple one it could also be that you're doing a lot of Ajax calls all over the place and if that's the case you might want to go to next and do other things but imagine you're in few right you can actually make a use fetch composable yourself you could probably also get that from the few use Library which is amazing but that's for another video so let me just import the use fetch composable that I've made and then show you all the things so basically here I'm using use Fetch and what comes back from usefetch in this case is a data property and there might also be other things coming back because of um whatever you want like errors or loading States things like that and so here I'm actually querying an API point that I have for my own conference talks for my press kit website and I'm just limiting it to one result so let's have a look so basically what came back is one conference which I'm speaking at next week and so basically let's have a look at how this works so in this case I'm again grabbing ref from few and so I'm doing a few things here I'm exporting the use fetch system and or the name of the composable sorry about that so I have a data ref and an error ref in this case so I'm fetching the URL that I'm giving to use fetch then I actually get a result back and because you're using fetch itself you have to then cast it to Json or to text whatever you want to do in this case it's Json and then if it's good I'm actually adding data dot value is that Json and in this case because data is a ref if you want to set something in a ref you do a DOT value and set it if there's an error it actually sets the error so it returns both data and error of course if there's no error and it stays null but if there is an error that is actually something that's also returned so I could do something like this right I could get back that error and use it and so it's that simple that's the way and of course you can do async await and a whole bunch of other stuff here but this is just to show you how easy this is and I can just say you know what let's limit it to three and see what comes out well there's three three of my upcoming talks of which one already happened and so that is how easy it is to actually make compostable um that's what I wanted to show you if you have any questions replies comments whatever different opinion go to the comments and tell me I'll see you in the next one cheers [Music]