Okay, let's take a look at how to customize your Vue and Blade components within Jetstream. You might want to change the color of things to match your branding, or you might want to change the components around completely. Jetstream is built with Tailwind CSS, so you're going to have to be familiar with that. And it also makes use of Blade components, so you're going to have to be familiar with that as well if you're using the Livewire stack like we're using here. So make sure you publish all of the Vue and all of the Blade components to your project. So just run this command here, and it should do that. So let's do that here. And now everything's been copied to this folder.

So let's do that here. And now everything's been copied to this folder. So let's go ahead and take a look at some customizations we can make. So let's go into the Login view. So this corresponds to resources/views/auth, and all of the Auth-specific views are in here. So Login's right here. And just to make sure this is the correct one, let me just change this, and let's see if it works. Okay, so it is the correct view. Let's take a look at the Blade components.

Okay, so it is the correct Vue. Let's take a look at the Blade components. So Vendor, here we go. And let's take a look at the Button. So all of the Buttons are this dark gray. So if you want to change that, I believe it's the Button component, and we just have to change the color here. So let's say our main color for our app is green, and this should change all of the Buttons in our app. And it does.

in our app. And it does. Cool. So let me just change that back. Say you wanted to change the entire look of the Login form, we can do that as well. So I'm just going to make use of another Tailwind UI component, which I have open here. So let's see if we can grab this layout and put it into our Jetstream Login view. So let me just copy the code. Here's how the code looks. And let's see if we can replace ours.

Here's how the code looks. And let's see if we can replace ours. It should be pretty straightforward. So let me just duplicate this. And let's name it... Actually, let me rename this first. Rename it to Login-Original. Okay, and let's duplicate it again, and this will be our new one. Login.blade.php, okay. And let me get rid of everything in here.

Login.blade.php, okay. And let me get rid of everything in here. And let's just make sure it's correct. Back here should be Hello, okay. And now we can just paste in the code that I copied from the new Tailwind UI layout. You have to make a few extra changes, but this should render correctly. And it does. And the only thing we have to change is... Let's see. So where does the form start?

Let's see. So where does the form start? And to note, you can extract these two Blade components like it is originally, but in this case it's not doing that. So where is the form here? Okay, it's right here. Let's change the action. So it should match this. So the route name is Login. Let's say Route::route('Login').

So the route name is Login. Let's say Route Login. And let's add the CSRF token. And there's some stuff up here for the validation error messages. And also this session status, which I'm not exactly sure what that render is, but let's put that in there anyways, above the form, okay. And I think one more thing we have to do is add the names for email and password. As you can see, there's no name here. So let's say name equals email and name equals password. And this matches the names of the original form.

So let's say name equals email and name equals password. And this matches the names of the original form. So where's the password here? And I think that should do it. We should be able to use this form with Jetstream now. Okay, let's refresh. And I believe it was user.user.com. Let's see. Let me put in a wrong password. Okay.

for the responsive mobile version. So there's another one down here. So if I look for dashboard, there it is, responsive navigation menu. And we have to do this as well. So let's duplicate this and say members and members here too. And now it should appear. Well, we have to meet the route first. So let's go into our routes file. Let's duplicate this one. And this one will be members.

Let's duplicate this one. And this one will be members. Oops, say members. OK. And we also need a view for that. So I'm going to duplicate which one? The dashboard. Let's call it members.blade.php. And let's remove this component and just put something in here. Members only.

And let's remove this component and just put something in here. Members only. OK. So if I did everything correctly, there should be a new menu item. It goes to the correct view and it should also appear in our mobile view. There it is, dashboard and members. OK. Now let's take a look at this menu here, the dropdown menu. There should be a component for that. I believe it's dropdown.blade.php.

There should be a component for that. I believe it's dropdown.blade.php. And it is. So you can see the transition and the showing and hiding, which is controlled by AlpineJS. And the menu items are within this navigation dropdown blade view as well. So you can see profile, API tokens, team settings, and so on. So if you want to add a new one, let's put it underneath profile. We can just duplicate this and we can do the same thing. So let's just replace this with that new view we made and say members and we can change this as well.

What else? Let's take a look at the profile section. So this corresponds to, I believe there's a folder in here for profile. And this is the main layout. And each one of these are Livewire components. So this is a Livewire component. So it's updatePassword, one for twoFactorAuth and so on. And there are different sections for each of them here. So for example, for profileInformation, it should be updateProfileInformation. So if I were to add something here, that should render here and does.

So for example, for profile information, it should be updateProfileInformation. So if I were to add something here, that should render here and does. So yeah, pretty straightforward. updatePasswords right here. twoFactorAuth is right here. sessions is right here. And deleteAccount is right here. So yeah, same goes for the other features up here. API corresponds to this folder, or the API tokens and teams corresponds to this folder here.

API corresponds to this folder, or the API tokens and teams corresponds to this folder here. So yeah, you should have complete control over your views as they are all available after you publish them. Let's also take a look at customizing the logo here or the default logo. You can see that there are three places where we have to change the logo if you want to do that. So the first one is application logo. That should be in the components folder, application logo, and just replace it with your own SVG. So if I were to comment this out, I'm not exactly sure which one this replaces, let's

So yeah, it is that one there. And the authentication one is the one when we log out. So this right here, I replaced it. So let's take a look at the register here. Yeah, so this one right here. So if I were to comment this out, this is gone. Okay, cool. So one more thing I want to show you is a version of Jetstream that's not making use of Tailwind for people who are not familiar with Tailwind or don't want to use it. Someone made a package that replaces all the Tailwind components with Bootstrap components.

of Tailwind for people who are not familiar with Tailwind or don't want to use it. Someone made a package that replaces all the Tailwind components with Bootstrap components. You can find it here. And from what I've seen, I have it installed. It looks pretty good. So Playground, I think it's jetstrap.test. So yeah, it looks almost the same. But like I said, it's making use of Bootstrap if you prefer that. And here's the login view. And see, I'm not sure if I have a User for this project, but yeah, there it is.