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
14. Building the navigation

Episodes

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

Transcript

00:00
Now that we have some styling pulled in, let's work on the general structure of our layout and pull in our navigation and also make this work. Then we'll very quickly dive into how to link to other pages,
00:11
just in case you're new to Vue Router. OK, so if we head over to our file tree here, you can see that we've got this main app.vue file. This contains this router view and what's getting injected into here is the home view, which is inside of our router that we have here.
00:30
We have all of our routes to find here. As we saw earlier, at the moment, we've just got home. So when we hit the home page, this path, this just gets injected directly into here. So what we want in our main app layout is our navigation at the top here.
00:45
We've already got a navigation component and then any of the pages that we visit here, because we assume that we always want the navigation in Vue. Now, over in our home view, we did pull in the navigation earlier. We can get rid of that because we don't necessarily need that anymore.
00:59
So let's get rid of it from here. We'll also get rid of Axios. And what we can now do is just create a kind of wrapper for our router view. Now that we've got Tailwind pulled in, we can just start to apply some styles here.
01:11
So let's go ahead and say that we want some padding on the y-axis just to separate everything out. And on a larger viewport, we'll increase this just so we have nice mobile styles as well. Inside of here, we will create another wraparound. And we will go ahead and just set this content so it's in the center.
01:29
So margin x of auto. And we'll set a maximum width of, say, 7xl. Set the padding on the x-axis to give it a little bit more. And we'll say large padding x.
01:41
And we'll just bump that up to 8. So by doing that, we've got everything centered in the middle. I have quite a small resolution here. But as you can see, everything just sits in the middle for us.
01:52
OK, so next up is our navigation. Let's go ahead and just sort of get rid of everything we did earlier. And we'll go ahead and pull in some pre-created styles for our navigation. So we can keep this just up here.
02:05
But I'm going to go ahead and pull in a bunch of markup that I have from earlier. And this is available on the GitHub repository. So you can just go in, go to the course resources directory, just grab this and paste it in if you're following along.
02:19
So let's go ahead and open this up. And this is what it looks like. So what we have at the moment is just a bunch of links at the top here. We have a state for when the user is logged in.
02:28
We have a log out and log in button, which, of course, will change over depending on the state. And we have our overall content sitting on the page. Now, this is responsive.
02:38
So if we just go ahead and pull in our device preview here, you can see that as we get to a slightly smaller viewport, this gives us a navigation menu like this, which by default is just open on a smaller viewport.
02:53
We're going to need to use view to toggle that. Let's go ahead and do that really quickly now. So it's done. And then we can start to pull everything else together.
03:00
To do this, let's go and create out a mobile navigation open ref. So let's pull that in. And we'll set that by default to a value of false. What we can then do is head down to the mobile menu just here.
03:14
And we can only show that if the mobile navigation is open. So by default, if we come over, you can see that it's not open. But when we click this button here, we want to be able to open it. So just up here, we've got this open main menu button.
03:29
So we could easily just attach a V on click handler to this. And we could set the mobile navigation open to true. And then a little bit further down in this markup, we have this close menu for when it is open.
03:42
So again, we can attach a V on click to this. And we'll set the mobile navigation open value to false. And that should be enough to get this working now. So I can open this and I can close it.
03:56
Of course, we see all of our links in there. We've got duplicates here, but that's just because we're not changing around the state. OK, so now that we have got our mobile navigation working, let's take a look at linking through to another page.
04:10
So the first step is to head over to our router. So let's go over to our router index and let's create our new page in here. Then we'll register the component. So this is going to be the user's dashboard.
04:24
So let's call this dashboard so we can reference it through our app by name. And we're going to create our dashboard page. So over in our views, let's go and create our new view file. I'm going to call this dashboard.
04:36
I'm not going to prefix this with view because I much prefer just having the name of the page. So I'm actually going to rename that as well. And let's head back over to our router here, get rid of that. And we'll change this over to our dashboard.
04:52
Let's change this home over as well. So everything is nice and similar. OK, so now that we've got this dashboard route, we should be able to head over to dashboard. You can see that this still includes the navigation because, of course, it's part
05:07
of our main nav, but we don't have any content on the page. So let's go ahead and hook this dashboard link straight up to be able to click through to here. And again, if you're new to view router, this should help you out. So if we head over to our navigation component, let's look for dashboard.
05:22
It's in two places, both the mobile and the main nav. And what we're going to do here is pull in router link. So this is a component which will render out an anchor, but it will allow you to pass in where we're going to here.
05:38
So we could say two and we could either just give the URL. But the beauty of named routes is we can name this to dashboard. So let's look for the other dashboard link and we'll switch that over. So we've got one just here for our mobile menu.
05:53
Let's also pull in router link here. Switch the href over to an object under this to prop. And set the name to dashboard. So now over in our app, when we click dashboard.
06:06
Yeah, sure enough, we go through to the dashboard. OK, so the navigation is kind of done. What I'm going to do, though, is update it now to change around all of this state, since we have this login page in here already.
06:19
So let's hop back over to our navigation and look for that user name here. We know that we can pull this in from our use auth composable. So we've got the authenticated Boolean and the user object. Let's just tidy up some of these indents as well while we go.
06:37
And let's find where that user name is again. And it's going to be just about here. So yeah, let's go in here and change around what we see in here based on the authenticated state. So this is the wrapper for when we are authenticated.
06:55
And then this down here, login and possibly a register link, if you wanted to include one is for when we're not authenticated. And we already know that we can just grab the user's name. So let's say user name and we should be good.
07:09
And we can click that to log out when we are logged out. So now we just have login. Now, this is sat on the home page. Absolutely fine for now.
07:18
I'm going to go ahead and submit it. And yeah, there we go. OK, so now our navigation is pretty much done. Let's go over and build out a much nicer login page.

Episode summary

In this episode, we're focusing on building out the navigation for our Vue app. Starting with some basic layout tweaks, we add padding and centering using Tailwind to make things look a bit cleaner and more responsive. We also make sure the navigation component sits right at the top, ensuring it stays consistent across all our pages.

Next, we pull in some pre-styled navigation markup (which you can grab from the course resources on GitHub), and set up responsive behavior. On smaller screens, the nav turns into a mobile menu, and we use Vue's ref feature to toggle the menu open or closed when buttons are clicked. Pretty quickly, we get the mobile menu fully interactive, so your navigation works great on any device.

We spend some time linking up the navigation to our routes using router-link, showing how to name your routes and connect them easily in Vue Router. This makes moving between pages like Home and Dashboard super smooth, both on desktop and mobile navs.

Finally, we tidy up the navigation state by using our authentication composable. That way, logged-in users see their name and a logout button, while logged-out users get a login (and optional register) link. Everything's nicely dynamic and fully hooked up!

By the end, the navigation is complete and responsive, handling user state and page links. Next up: making the login page look awesome!

Episode discussion

No comments, yet. Be the first!