Nuxt 3: Head management

my name is tim Benniks this is a turbo
tutorial
in this quick tutorial i want to show
you how easy it is to add things to the
head of your html page with next three
they've added a whole bunch of
convenience methods so you don't have to
kind of
work around it how you have to do it in
x2 so let's go into the vs code and i'll
show you
so nowadays what you can do in next
three is actually really really cool you
can actually just add a hat property in
your template off your page and now you
can see i'm in an app.vue and even
there it works and so i literally just
had the title friends i just added it in
nothing else and by the way this is a
clean knucks 3 setup there's nothing in
there no modules no plugins nothing not
even configuration and so when i refresh
that page of course you see a picture of
friends because why not and in the title
you can see there is friends
and so now that we have this we can
actually do some fun stuff we can
actually make this more dynamic so how
about we make a const
title
which is a ref
and let's make it
fred oops
friends is awesome and then what we can
do is actually make that dynamic
if i can type always the same problems
and there it is friends is awesome so
that works really well quite as expected
but you can also do more there is a
really cool composable that can help you
and so i've actually copy pasted that
because i'm not good at typing so here
you go
and so let's make that title basically
friends again
and so now what we've done we've added
the use head composable and we add a
title template with that variable that
we just made
right so now we can say next three likes
title and so the title template allows
you to have every page now says next
three likes and then whatever that
variable title becomes it puts it in
there and there's also some other stuff
like we can add stuff to the to the body
like a class with
a friend's class to the body or other
things for later on if you wanted to
include fonts or scripts or whatever you
want to do you can add that in here and
that's really easy to use and so let's
see what this made let's refresh and
then it says next3 likes friends and so
there you go
so how about we have a look if we can
find that body attribute of a class let
me just zoom that in a little bit and
the body class friends has been added
and this is actually how simple it is
and you can do this in any page you want
and you can kind of make it dynamic
you can do async calls and then add that
data to this
it's basically just so simple now
there's no other way you have to be
doing it so that's what i wanted to show
you thank you for watching i'll see you
in another turbo tutorial cheers