Authentication with Laravel Sanctum and Vue
This episode is for members only

Sign up to access "Authentication with Laravel Sanctum and Vue" right now.

Get started
Already a member? Sign in to continue
Playing
07. How composables work

Episodes

0%
Your progress
  • Total: 1h 35m
  • Played: 0m
  • Remaining: 1h 35m
Join or sign in to track your progress

Transcript

00:00
We're now going to talk about view composables and how building a authentication composable is going to help us basically reuse functionality throughout any of our components and also maintain some kind of state management without pulling in a full state management library.
00:16
If you're already used to view composables, feel free to skip this. I'm just going to be going over the basics. If you don't know what a view composable is or if you haven't worked them for a while, let's go ahead and have a look. So the first thing I'm going to do is keep this login stuff in here, but I'm just going to change this up so we don't make requests to our API. We
00:37
don't want that getting in the way. Okay, so let's go and create our header which will sit on this page. So let's go into our source directory and under components and we have a couple of components in here which we can actually delete as well. So let's go ahead and get rid of the welcome and let's also get rid of the welcome item and finally let's go ahead and get rid
01:03
of these icons directory as well. So we should have deleted them earlier. Okay, so under our components now I'm going to go ahead and create our new view component and I'm just going to call this navigation. So this is just going to be a completely separate component which will be our navigation. Now the goal here in our navigation is to show some kind
01:20
of item like the user's name. So let's say that we want to show the currently authenticated user's name within our navigation, but we want that to happen when we've gone ahead and updated what we saw in our home view. So inside of login we're going to set the user's name in here once they're authenticated although we're not actually authenticating them and we want that to instantly
01:44
appear in our navigation. So we're creating some sort of state management like I said without pulling in a full state management library. Okay, so let's get started with this. Over in the source directory let's create out a directory called composables and inside of here we're creating out a composable called useAuth. So let's create out a useAuth javascript file. Now in here what
02:07
we're going to do is just export a useAuth function. That's pretty much all this is going to be and then what we can do is just at the top here go ahead and define some state. So let's do this now. So this is going to use a reactive object from view so let's make sure we import that as well and we're going to have things like the user's details inside of here. Just while we're playing
02:33
around let's set this as an empty string with just one property. Now let's go into useAuth and create a setter. Now this isn't anything special it's just going to be a function that sets this value. So let's just say set name and we'll create this out as just a normal function and we'll take the name into here and then we're going to set the state name to the value that
02:56
we've got. So effectively we've got some global state here and a setter. We can also provide getters, we can create functions in here which also then call our setters. This is just a very watered down version of a state management. Okay so now that we've got this how do we use this and how do we read this state? Well at the moment we can't really do much because we're not exposing
03:19
anything from this composable. Let's go ahead and return an object with all of the things that we want to output. So we want to have access outside of this to the set name function. We also want access to our state but we don't want to expose the state itself. So let's create a getter which will actually get this name back for us. So let's create a get name in here. We're going to make
03:46
this a computed property and inside of this computed property the return value all we're going to do is pull back the state name. So now we can go ahead and expose get name as well. So from outside of this composable wherever we decide to use it we have the ability to set the name and also get the name as well. So if we think about it we can set our name from our home view
04:11
and we can get our name from our navigation. So let's go over to our home view and look at setting this first of all. So to pull in this composable and use it we first of all want to pull this in from here and then we want to destructure everything that we want to use. So on this home view we just want the ability to set a name and we go ahead and invoke use auth and
04:35
that gives us back that set name function. Let's go down here to our login method and just call this and just pass in a hard-coded value. So that will now set that state with that name. Now if we head over to our navigation component we can do exactly the same thing but read this state. So let's go and import use auth again and again destructure what we want out of this. So in our case we want
05:02
the get name functionality which is that computed property and again we just invoke use auth. So now down here we can output the result of get name. We probably could have just called this name but it doesn't really matter for now we're going to be getting rid of everything at the end. Okay so now that we've got this let's go over to our home view and include that navigation at the very top of the
05:26
page. So let's pull that component in and of course just make sure we put it up here and let's go over and try this out. Okay so we're going to go ahead and hit login and there we go. So we've set that from login but in a different component the state has updated this to reflect the value. So again very basic state management but we can use this to our advantage. For example we'll have a login
05:50
page where we log the user in. Inside of the use auth composable we can do everything that we need to do to authenticate the user. Then we can send a request to get the user and we could have some global state with all of the user's details in like their email address their name and we can show these to the user.

Episode summary

In this episode, we dive into the world of composables in Vue and why they're so useful for managing reusable functionality and shared state across your components—without needing to pull in a big state management library. If you're already super comfortable with composables, you might want to skip ahead, but for everyone else, we're going over the basics and building a practical example together.

We start by cleaning up some old components and then set up a new navigation component that will display the current user's name. Next, we create a new composable called useAuth—this will hold our authentication logic and state. You’ll see how we can use Vue’s reactivity to store the user’s name and provide functions to update or retrieve it.

We connect this useAuth composable in our Home view to set the username (pretending to "log in" a user), and read from it in our Navigation component so that any updates are instantly reflected. This demonstrates simple global state management using just composables—no Vuex or Pinia required.

By the end, you'll see how the pieces fit together: setting state from one component and reflecting changes in another. This technique is perfect for basic authentication or any shared information you want to access and update from different parts of your Vue app.

Episode discussion

No comments, yet. Be the first!