Nuxt 3 Authentication with Laravel Sanctum
This episode is for members only

Sign up to access "Nuxt 3 Authentication with Laravel Sanctum" right now.

Get started
Already a member? Sign in to continue
Playing
07. Structuring our Nuxt application

Episodes

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

Transcript

00:00
Okay. We're going to focus on a better structure for our application. So we can just start to build each of these pages out that we need.
00:06
Okay. So we're going to go and create out a layouts directory inside of Nuxt. Inside of here, we're going to create out a view component just called default. That will just be used as the default template for all of
00:19
the pages that we're creating. So what we need to do in here is create some sort of wrapper and then just include the default slot where all of the page components will be directed into. We don't have any styling at the moment.
00:31
So why don't we go ahead and pull in something like Tailwind to make this just look a little bit nicer. If you don't want to use Tailwind, that's absolutely fine. The rest of the course will work.
00:42
Okay. Let's go over to the framework guide section over to Nuxt and let's go ahead and get Tailwind installed and configured. Okay.
00:49
Let's go and open this up and install Tailwind. We'll then go ahead and publish the Tailwind configuration file once this is finished. And then we'll go and just add in our post CSS plugins.
01:01
We do this inside of our Nuxt config. So let's head over to our Nuxt config file and we'll just do this down at the bottom. Next up, we're going to go ahead and choose what we want to include where the styles exist.
01:14
So we are going to go over to our Tailwind config file and we'll just pull them into content. That'll pull in any styles from our components directory, which we'll be creating soon, our layouts and all of our pages.
01:27
Okay. So next up, we want to go ahead and install the base utilities and components into some sort of JavaScript file. Let's create a directory here called assets.
01:38
And into here, we'll create another directory called CSS, and then we'll create out a style sheet called app. Okay. Let's paste them in, and then we're going to go ahead and configure this
01:49
over in our Nuxt config file. To do this, we just need to point to where the CSS files are located. And we know that this is in assets, CSS and app.css. Once we've done that, we can go ahead and just close off NPM run
02:05
dev, rerun it, and we should be good. Okay. If we head over to the browser, let's just check this out. We should have a completely fresh project with Tailwind reset all pulled in.
02:16
Another thing that we're going to do is pull in the Tailwind CSS forms plugin. So let's go ahead and install this to reset all of our forms properly. Okay. So let's go and pull this into our project.
02:26
And then all we need to do is come over to tailwind.config.js and require this in under plugins. So that's requiring Tailwind CSS and forms, and we should get an even better reset on all of our forms.
02:41
Okay. Let's focus on our app container. So let's go over to our layout that we created, and let's start to add some styles here.
02:49
So let's set a margin on the X axis of auto. We'll set a max width here of five XL. Let's set some padding on the top of 12 and we'll set some padding on the X axis to eight.
03:00
It doesn't really matter what we do here. We're just kind of playing around. Now that we've done that, you can see that there's still no effect over in our page.
03:08
This isn't being used yet because we just need to come over to our main app entry point and add this in. To do that, we just wrap whatever we're rendering out, which is our Nuxt page with Nuxt layout.
03:19
And once we've done that, we should see that default layout get used and everything is now nice and centered. Okay. So I'm going to quickly go out and create our navigation.
03:29
We'll be adding to this as we go. And to do this, we create a directory called components and any components that we add in here. So view components will just be automatically registered.
03:39
So we're going to create out a app navigation file. And then in here we can start to build out our navigation. Let's just scaffold this out really basically with a little bit of padding. And let's just add a home item in here and then go ahead and register
03:53
this over in our default layout. So this will just sit at the very top here. Okay. So once we've done that, let's go over there's our navigation.
04:00
Great. Let's just link up a couple of pages, just so we have an idea. If you're new to Nuxt about how to link through to pages and then we're good to go.
04:09
So over in pages, I'm going to create out a new page by creating out a view component, just called dashboard. This will be our dashboard page that we protect with our middleware. So let's create our dashboard in here.
04:22
And that's now a page. So we should be able to head straight over to dashboard and see that new content within our layout. Let's create a link for this in our navigation.
04:31
So for the homepage, we have a Nuxt link component, and here we just point this to a particular location. In our case, that's just going to be a forward slash. And then within the component, we can just add in any text that we want.
04:44
So now this will link through to the homepage and we can just do exactly the same thing for the dashboard. And let's go over and change the text over here and we should be good. Great.
04:55
So now we can click through to home and dashboard. Just space these out a little bit. So we're actually going to have two sections here. One is going to be for our main links over this side.
05:06
And then one is going to be for our auth links. So let's just add in a really simple link here to go through to our account, which of course we haven't built yet. In here, we can now say flex item center and let's justify these between.
05:20
And then for each of these, we also want these to be a flex of item center. And we want to space these out on the X axis by a certain amount. So we can grab the same class here and apply it to this one. And we should end up with something that resembles a navigation.
17 episodes•1 hr 1 min

Overview

Learn how to build a full authentication boilerplate with Nuxt, Sanctum and Fortify.

This course covers everything you need to get started with authentication with Nuxt and Laravel. We’ll start by setting up a Nuxt project and configuring Laravel Sanctum, then add the ability to register, sign in and sign out.

We’ll also cover some TypeScript tips, protecting pages with middleware, and using Vue composables to keep our code tidy.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.