Nuxt 3 Authentication with Laravel Sanctum
Playing
02. Client and API setup

Episodes

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

Transcript

00:00
Let's get started by building out both our API and our client projects. And we'll start out with Laravel, then install Nuxt, and we'll go ahead and just configure it so we have a nice fresh starting point.
00:10
Okay. So I'm going to make a directory called NuxtAuth and let's cd into that directory and start with a Laravel project. We're going to call this API, but of course, feel free to
00:21
call this anything you want. We will need to configure both of these projects to use the same domain. We'll do that a little bit later. Okay.
00:28
So since we're just working with an API, let's choose no starter kit. And in terms of the testing framework, we don't need tests. So we'll say no to both of these. Okay.
00:37
Let's go ahead and choose MySQL as our database and let's run the default migrations, and now that we've done that, let's go into that API directory and we'll just open that up in our editor. Okay.
00:47
So once this is up and running, let's just confirm this is working by pinging api.test. I'm using Laravel herd to serve this, but it shouldn't really matter. How you're serving this as long as you can access this.
01:00
So we know that that project is set up. Let's go ahead and create our client. To do this, we're going to use MPX Nuxie latest, and we're going to initialize a project called client.
01:10
Again, you can call this whatever you want. We're going to be customizing the domain anyway, so it doesn't really matter. Okay. Let's go ahead and hit enter on that and let's choose NPM as our package
01:20
manager, or that you can choose anything. And let's just wait for that to finish. Okay. Once that's done, we're going to choose no for the Git repository and we are done.
01:29
Again, we can cd into that client directory and also open that up in our editor. Let's go ahead and combine both of these projects. So let's merge these together. And now we have our API and our client ready to go.
01:42
Let's focus on our client. First of all, we're going to run NPM run dev that will boot up a dev server for us. And we should now be able to access this under localhost and 3000. Let's go ahead and open this up and you'll see a welcome page like
01:56
this, and we can get started. So the first thing that we're going to do is remove out that welcome page. So let's go over to app.vue and let's get rid of the root announcer and the Nuxt welcome components, and we'll just write home in here for now.
02:13
Let's go back over to the browser and you should see the following. Okay. Let's add some configuration options. We're not going to really need the Nuxt dev tools.
02:21
So why don't we go ahead and disable this? Let's go over to the Nuxt config file and let's set dev tools to enabled and false. If we come back over to the browser, sure enough, that has now disappeared. Okay.
02:33
So we have a nice fresh base for our client. We have our API installed. Let's take a look in the next episode at using the same domain for both projects, which is going to be incredibly important later.
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.