Authentication with Laravel Sanctum and Vue
Playing
02. Fresh Laravel and Vite projects

Episodes

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

Transcript

00:00
So, as the first step, let's go ahead and get two projects set up, our Laravel API and our client.
00:07
Okay, let's go ahead and start by making a directory and we're going to call this Laravel Sanctum View. This will house both of our projects. So, let's cd into that directory and we'll start things out by creating out our Laravel project. We're not going to need to do too much to this just yet, we just want to make sure that it's installed, the migrations are run
00:28
and we can get it open in the browser. Okay, let's go ahead and use the Laravel installer to create this and we're going to create this as Laravel Sanctum View API. Let's go ahead and run this. We're not going to use the starter kit because we're going to be pulling in Laravel Fortify which will provide us all of our authentication functionality a little bit
00:47
later. So, let's choose no starter kit and we'll choose whichever testing framework we want and just wait for everything to install. Okay, now that's done, let's choose a database provider. We're going to use MySQL here and we'll go ahead and choose to run the default migrations and also create this database as well. Okay, now that's done, we should have a fresh database created
01:08
and we'll just go ahead and open this up in the browser just so we can see that this is working. And yeah, sure enough we have a fresh project up and running. Like I said, we're not going to be doing too much for this yet, we'll get to what we need to install a little bit later. Okay, so now that we've got our API, we're going to go ahead and create out a new VEET project with npm create
01:29
and we're going to use Vue of course and latest. Let's go ahead and run through the options that we want for this. The first thing is to give this a name. So, I'm going to give it exactly the same name here, Laravel Sanctum Vue, but I'm going to call this client. Next, we are not going to add TypeScript, although you can. No JSX support and we do want to use Vue Router because when we build
01:51
the system later, if you want to go ahead and follow that, we are going to need routing. We don't need state management and we are going to ignore the end-to-end and unit tests for now and also ESLint. Okay, we can say no to this last one and we are done. So, let's go into the Laravel Sanctum Vue client directory and let's just follow the steps here to install this
02:14
and then npm run dev. Okay, great. So now that's done, we should be able to open this in the browser and you should see something like this and we now have a fresh project up and running. So, that is both of our projects up and running. Let's go ahead and get these open in our editor and we can get started. So, let's go into the Laravel Sanctum Vue API project and we'll go ahead and
02:38
open this up with phpStorm. Once that's open, we'll go ahead and do exactly the same thing with the client. So, let's go into the client directory and open this with phpStorm and then what I'm going to do is just go ahead and combine these project windows just so we have them side by side and we can work with them more easily. Okay, so both of our projects set up and we can move on.

Episode summary

In this episode, we're kicking things off by setting up the two separate projects we'll need for our app: the Laravel API and the Vite-powered Vue client.

First, we create a new directory to keep things organized, and inside that, we generate a fresh Laravel project (without any starter kit, since we'll add Laravel Fortify for authentication later) and set it up with MySQL. We run the migrations, make sure the database is working, and check that we can access the default Laravel welcome page in the browser—basically ensuring the backend is ready to go.

Next, we jump over to the frontend. We use the Vite scaffolding tools (with npm) to spin up a new Vue project, call it the client, and configure it with Vue Router but skip extras like TypeScript, state management, or linting for now. Once it's set up and running, we again check in the browser that the project loads fine.

Finally, we fire up both projects in our code editor (PhpStorm), place them side by side, and make sure everything's good to go for development. So by the end of this episode, you’ll have both your backend API and your frontend client set up, running, and ready for us to start building cool stuff.

Episode discussion

No comments, yet. Be the first!