This episode is for members only

Sign up to access "Build an Appointment Booking System With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
24. Building Alpine plugins

Episodes

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

Transcript

00:00
So now for the fun part, we're going to start working on our calendar.
00:03
Now, over the next few episodes, we're going to slowly build this up. But before we do anything, I just want to talk about building out Alpine plugins.
00:11
So what we don't really want to do is just dump all of our code directly within here. We're going to create a directive where we can do something like x-picker, and that's
00:20
going to turn this input into a date picker for us. But before we dive straight into that, let's get everything set up so we can access Alpine on its own, and we
00:30
can register out a plugin which creates this directive. OK, so a little bit of background. If we come over to app.js, which is in our resources directory, we don't see anything in here.
00:41
Now, Livewire depends heavily and works basically on Alpine to do all of its client-side stuff. So what we need to do is we need to plug Alpine out directly in order to modify it or add plugins to it
00:57
or anything like that. So inside of app, we're going to go ahead and manually import Livewire and Alpine, and we're going to pull that in from, and we need to go back into our vendor folder
01:08
here, into Livewire, into Livewire again, into the distribution folder, and we need to pull in livewire.esm. OK, so now that we've done that, what we can do
01:21
is we can start Livewire manually now. So we're going to say Livewire start, and that means that in between here, we can do things like Alpine plugin,
01:33
and we can register our picker plugin, which we're eventually going to pull in. Now, at the moment, this isn't quite going to work. We're going to come over to our layout app,
01:40
and just down at the bottom of the page, we're going to include this Livewire script config directive. So that's going to go ahead and disable everything for us
01:49
so we can manually start this out. So if we head over to the browser, everything should still work. We shouldn't see any errors in our console.
01:58
Let's just pull this down and check. And yeah, aside from one of the plugins I have in my browser, everything looks good. So now what we can do is start to build out a plugin.
02:07
So let's go ahead and do that now. So inside of just our JS directory, it doesn't really matter where we put it, I'm going to go ahead and create our picker.js file.
02:16
This is going to be our plugin. So inside of here, we're going to go and export this so we can import it within our main app file. We're going to go and register this as a function.
02:28
Alpine will be passed into this when we register it. And then we can go ahead and do things like create our directive. So let's create our directive called picker.
02:38
And into this, we're going to go ahead and get a closure. And we can just do something. So let's just console log something out for now, and then we'll fill this in in the next episode.
02:46
So we'll say picker registered. Great. OK, so now that we've got this, we can go ahead and import it from here.
02:52
So let's import that picker from picker.js. And then down here, we're going to say Alpine, which we can now access, plugin, and picker. And there we go.
03:03
We've registered it. So now, if we head over to our checkout, we can say x picker. And sure enough, if we head over and check our console, we have registered a directive with Alpine.

Episode summary

In this episode, we're kicking off the fun part: starting work on our calendar feature! But before we get into building the actual date picker, we take a step back to set a solid foundation by learning how to make Alpine plugins.

You'll see why we don't want to clutter our components with piles of code. Instead, we introduce the idea of creating a custom directive—like x-picker—to neatly attach our date picker behavior to inputs. We walk through how to manually wire up AlpineJS with Livewire, and how to import them so we can tinker at a lower level and register our own plugins.

We set up our project so Alpine is accessible directly, and go over some tweaks in the project files (like updating imports and registering scripts in the layout) to make sure we're ready to roll. Once that's in place, we make a new picker.js file for our plugin, export it as a function (with Alpine passed as a parameter), and register a simple directive that for now just logs a message when it's used.

Finally, we import and plug in our new picker plugin, and confirm everything is working by checking for the console log when we use the new directive in the browser. That groundwork is done—now the real date picker building can start in the next episode!

Episode discussion

No comments, yet. Be the first!