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
13. Installing Tailwind

Episodes

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

Transcript

00:00
In this section, we are going to expand on what we've already created to build out a really nice structure for your next application.
00:06
This is going to include registering more routes, include things like middleware and building out the pages so they just look a little bit better. In order to do that, the first thing that we're going to do is get Tailwind installed. Now it doesn't matter if you're not working with Tailwind, the examples that
00:21
we're going to be pulling in and all of the markup and styles that we have will be tied down to Tailwind, but you can follow the rest and just implement your own styles if you need to. Okay.
00:30
So I'm going to head over to the framework guide section here and go over to Vite since this is what we're working with and we've already created a project, so let's go ahead and pull in Tailwind and all of its dependencies, first of all.
00:43
Next up, we're going to go ahead and initialize a Tailwind config file. So let's go ahead and pull that in and that should have created for us a Tailwind.config.js file in the root of our project. Now within here, we need to choose where we are putting any of our styles.
00:58
So in our case, it's just going to be in our view files. Let's head over to this view tab here. So we get a more tailored example and let's go ahead and pull this into the content section.
01:09
If you've worked with Tailwind before, you'll understand what this does, but effectively this is going to look in any view files, JavaScript files, and it's going to pull together a style sheet for us, depending on which of the utility classes we use.
01:21
Okay. Next up, we need to go ahead and include all of the base stuff for Tailwind. We saw earlier that under our source here, we've got this main.css file. So we can just paste that directly in there.
01:31
Okay. Last of all, we just want to go ahead and run npm run dev and we should be good to go. We already have this running, but let's go ahead and just cancel this off and rerun it. And let's open this up in the browser.
01:45
And there we go. Now, everything looks a little bit strange at the moment. That's because we haven't pulled in the Tailwind forms package. Let's go ahead and do that now by running an npm install on Tailwind CSS slash forms.
01:57
Once that's finished, we can head over to our Tailwind config file and under our plugin section, we can go ahead and require this in. So let's say Tailwind CSS forms. And when we head over, you can see that we've got a nice reset for each of our forms.
02:11
Now, that still doesn't look great, but that's what we're going to be doing over the course of the next episodes within this section, and we're going to build up what we saw from the introduction. So let's head on over and get started.
21 episodes•1 hr 35 mins

Overview

Learn how to authenticate with a Laravel API from Vue using the Composition API.

We'll start by setting up a fresh Laravel project with Sanctum and Fortify, configure everything step-by-step, and then implement the ability to authenticate from Vue with a simple auth module — thanks to the flexibility of the Composition API.

In the second half of the course, we’ll create our own beautiful starter kit with more features, including registration and middleware to protect routes.

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

Comments

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