Vue 3: Learn how to make a composable

my name is Tim Benniks 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