Sign up to access "Laravel Mentions" right now.

Okay, so how do we do this? Well, let's go over to our JavaScript directory under resources, and let's go ahead and create out a directory in here called plugins. Now we're going to create out the JavaScript plugin for this, which we're just going to call mentionable, and here we can define out a Alpine plugin. To do this, we go ahead and export a method or a function, and this will receive in Alpine when we use this exported function within Alpine.plugin when we register this later. Just to demo this, I'm going to go ahead and log out console.log Alpine plugin, and let's go ahead and register this over in app.js.

So let's import the mentionable plugin that we just created from mentionable, and in here we want to do something like Alpine.plugin, and then register our mentionable plugin. But because we're using Livewire here, we don't have immediate access to Alpine, so what we want to do is manually bundle this. So to do this, we are going to come over to something like app.blade.php, a common template that we're using, and just at the bottom here, we are going to say Alpine or Livewire script config, that's going to go ahead and manually pull that in for us.

So now what we can do is over here, go ahead and import Livewire and Alpine separately from, and let's go into vendor, livewire, livewire dist, and livewire.esm.js. Then we're going to go ahead and manually start Livewire, so we're going to say livewire.start. Now that shouldn't affect any of the functionality that we have in our app already, so we should be able to do everything as normal. And that's not working at the moment, let's just have a look here, and yeah, tribute's not defined.

So what we need to do is make sure we do this before we start Livewire. Let's do this just at the top here, and that should be good. Let's just check this out, and that looks okay to me. Okay, great, so we're back to how we were before, but now we have this Alpine import, we can do things like this.

Alpine plug-in, and we can register that mentionable plug-in that we've just pulled in. Now at the moment, all that plug-in is doing is logging out to the console, but now what we can do is just move all of the functionality that we have inside of xinit over to a directive and register this within our plug-in. So what do I mean by this? Well, let's just copy and paste everything within xinit, including tribute attach,

and let's just get rid of xdata and xinit, just so we don't have this as an Alpine plug-in. Next up, we go over to our mentionable plug-in, we're going to paste all of this in. Now at the moment, of course, this is just not going to work, everything's a little bit messy. Let's leave user search here, and then down here we're going to go ahead and register our directive.

So we'll use Alpine, which we get into the plug-in as we register it. We can continue to say things like Alpine directive in here. We'll register a directive which looks like this, x and then the name of the directive that we want. So in our case, let's call this mentionable, and as we register this, we get a callback in here

with the element that we're applying this directive to. So let's take all of what we've done here and put that inside of the directive register. So that's now registering the directive as part of this plug-in. User search could go inside of here if you wanted to, but we're just going to keep it outside.

Now L is the thing that we're applying this directive to, so this is what we need to figure out. So over in our comment index, rather than applying the plug-in to the overall wrapper, what we could do is get rid of this ref and we could just say x mentionable. Now what that's going to do is it's going to pass this text area as the element through to here.

Then we can just attach tribute to the element that we've applied the directive to. So this isn't customizable at all, but we don't really need this plug-in to be customizable. So now that we've got this, let's go and see what happens. So we have, if we think about it, let's go through the whole process of this now.

We import mentionable and register it as a plug-in. The responsibility of this plug-in is to register a directive that uses exactly the same functionality as we had before, including this user search. We're now using this directive directly on this text area, which takes that element and applies it.

So let's just see if this works and if there's anything broken, we'll fix it up. So let's say hey at, and yeah, there we go. Sure enough, we check out our network tab here as well. We are performing our search and that functionality is now tucked away behind a directive.

So with that in mind, what we can now do is we can come over to our comment items and we can get rid of all of this. We don't need to duplicate it anymore. And of course we didn't add in the HTTP searching functionality in here.

We can get rid of the ref in here and we can just apply the x-dimensional directive. So any changes we make now to that is going to be applied anywhere. So once again, let's just pull open our network tab here just so we can keep an eye on our requests. Hey, this works by making our searches.

And if we do the same here again, you can see that that also works as well. So very quickly and efficiently move this over to a plugin, which means any changes we make here now will be applied both to our initial comment form and each of the edit text areas as well.