reCAPTCHA with Laravel
Playing
02. Alpine.js basics

Episodes

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

Transcript

00:00
If you are super new to AlpineJS or you've never used it before,
00:04
we're going to take this episode to get a fresh project set up. And then we're just going to take a look at how Alpine works with the very basics. And this is really important if you've not worked with it before, because it's going to give you
00:15
a good understanding about how we're using this to hook into that form of submission so we can actually submit that token. So I haven't created a project yet. I'm just using the Laravel installer here to go ahead and create that.
00:27
So I'm going to go ahead and create that out now. And if you are following along, let's go through here. So we're going to use a starter kit just because it's going to be really easy. We're going to have authentication there.
00:36
We can just start to test this on form. Obviously, if you are integrating this into your own project, it's going to be easier. So let's go with Blade and Alpine.
00:46
We don't need anything else here like Livewire or Inertia. So let's go ahead and choose this. We don't really care about dark support mode. We'll choose PES for testing and we won't initialize a Git repository.
00:57
So we'll wait for this to go through. It's going to ask us about our database in just a second. And there we go. So we're going to choose MySQL.
01:04
Just wait for that to finish and we are pretty much done. Let's go ahead and make sure that we have got a database set up. I've got one here called Laravel underscore recapture, and then we can go ahead and migrate these changes.
01:16
So I've gone ahead and opened the project up and we're just going to run PHP artisan migrate here, and that should fill our database up with everything. So we can pretty much head straight over to our app and go ahead and start using this.
01:30
So we're on the login page at the moment, but by default, you'll just hit the dashboard page here. Let's go ahead and register an account really quickly so we know that we can actually log in because we're going to be applying
01:39
this functionality to our login form. And there we go. We're logged in. So this is the form that we're going to be adding this to. But as we saw, we can add this to pretty much any form or any action
01:49
that we want to take. OK, now that we've got this set up, let's talk about Alpine. So when we install with a starter kit here, we've got a lot of NPM dependencies that we need to go ahead
02:00
and install, first of all, if they haven't already been installed. And then we need to run NPM run dev, which is going to compile us everything together and we should be good. So let's go ahead and open up a new tab here, just so we've got that
02:13
for running any other commands. And we're going to head straight over to app.js in resources and JS. You can see here that one of them NPM dependencies is Alpine. This has been set to the window object so we can use this globally.
02:26
And we've called this Alpine start method to initialize Alpine. So how does this work? Well, let's just head over to our dashboard. We'll just play around with this and I'll just show you how this works.
02:37
In fact, let's do this on the form itself, since that's what we're going to be doing. So we're going to come over to the login.blade.php file. So within Alpine.js, we can make any element on the page an Alpine component. And we do that.
02:52
Let's look at an example by using X data. We don't need to provide any data that's stored within this component. Although we can do if we want to by assigning this an object. So for example, we could say name and then give a name out in here.
03:09
And this form is now an Alpine component. That's pretty much it. Simple as that. We give the page a refresh.
03:15
Nothing is different here. The form isn't going to work in any other way. But what we can now do is hook into this and perform certain actions. So just to give you an idea, let's use the X init initializer here to do something
03:29
when this component initializes. So I'm going to go ahead and console out, log out, just works. And let's head over to the page, open up our console, and you can see sure enough, we get this logged out.
03:41
So we can do pretty much anything we want inside of X init. For example, we can listen to when this form has been submitted. We can do anything. We can also output stuff inside of here.
03:53
So for example, we could create a span with X text, and we can reference any of the items that we have stored in the data for this component. So I could say X text name. And as you'll guess, that outputs Alex just inside of here.
04:08
So if you've worked with anything like Vue before, this will be very familiar to you. We're basically just creating a component out of this form and then hooking into actions.
04:19
Doing stuff in here. We can have events in here. Like when we click on a button, we can do something. And of course we can attach that event to the overall form as well.
04:27
So that's pretty much what Alpine looks like. That's pretty much all the knowledge you need, to be honest, to just understand the basics of Alpine. We create a component out of any element on the page, and then we
04:39
can just do stuff within that element within JavaScript. So now that we've got our app set up, let's head over to the next episode and actually properly hook into this form. So when we submit it, we can perform an action like grabbing that token from Google.

Episode summary

In this episode, we’re easing into Alpine.js—perfect if you’ve never used it before. We'll start from scratch by setting up a fresh Laravel project, using the handy starter kit with Blade and Alpine.js (no Livewire or Inertia needed). We’ll quickly run through initializing the project, setting up the database, and making sure everything runs smoothly so that we can test form-based features right away.

Once the project is ready, we dive into the basics of Alpine.js. We take a look at where Alpine fits into the project setup, check out how it’s made available on the window object, and then jump straight into writing some Alpine code.

You’ll see how to turn any HTML element (like a login form) into an Alpine component using the x-data attribute. We touch on adding data to the component, triggering JavaScript with x-init, and even outputting variables into the page using x-text. If you’ve ever worked with Vue, this will probably feel pretty familiar.

By the end of this episode, you’ll have a solid grasp of Alpine basics and see how easy it is to hook into forms and other elements. This will set us up for the next episode, where we’ll get hands-on with connecting the form to actions like grabbing a Google token on submit.

Episode discussion

No comments, yet. Be the first!