Laravel Livewire - Introduction to JavaScript

One of the great features that Laravel Livewire has is the integration of the client with the server; specifically in this context, PHP with Laravel with JavaScript; in this chapter we will explore these features further.

To use any Livewire JS like the $wire object or hooks, we must use the following directive:

@script
<script>
   // JS Livewire
</script>
@endscript

The Livewire JavaScript is generated by the directive of:

@livewireScripts

Introduction to Hooks in JavaScript

The hooks are nothing more than methods that are part of the life cycle of the components, as we presented earlier, in JavaScript, we also have similar references:

In order to use any of these, we have to use the following function in JavaScript:

Livewire.hook(hookName, (...) => {})

As we showed in the previous list, with the Livewire JavaScript object, we have access to several listener methods, which are going to be executed as part of the life cycle; let's see some:

@script
       <script>
           Livewire.hook('morph.updating', ({
               el,
               component,
               toEl,
               skip,
               childrenOnly
           }) => {
                console.log('morph.updating')
                console.log(component)
           })

           Livewire.hook('morph.updated', ({
               el,
               component
           }) => {
               console.log('morph.updated')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removing', ({
               el,
               component,
               skip
           }) => {
               console.log('morph.removing')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removed', ({
               el,
               component
           }) => {
               console.log('morph.removed')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.adding', ({
               el,
               component
           }) => {
               console.log('morph.adding')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.added', ({
               el
           }) => {
               console.log('morph.added')
               console.log(el)
           })
       </script>
   @endscript

Video Transcript

We are going to start a section that is quite interesting which is the javascript part Here we really have a lot of things It is a bit abstract because due to the type of application that we are creating which is a simple crot with very few functions it is going to cost a lot to be able to use some of this so more than anything we are going to make presentations explanations and little else since it is not something that is so necessary I see this a bit like what it is when you do not create a project in basic Laravel what is it Note that we have it included that it works for many things of course But at least for the fundamental parts it is not absolutely necessary so here it is a bit the same Let us remember that all this is mostly technologies on the server side but as a good modern framework that is we also have certain hooks with what is the client so in this case it would be with javascript things that can be done on the client Well as I told you this is going to be a bit abstract so you may have to see this several times or review the official documentation a bit Here what I want to do is a small presentation to see the parts that I consider most important so that you understand a little What you can get the most out of this and when you can use it

So the main thing if we want to use any liveware javascript like what we are going to see a little later for now what we have seen is the wire object this object in this case we use it here directly in a Livewire Script block

wire:click

So no there is not much to worry about But we can also use this in a normal Script block which is what I want to get to so to use this type of javascript in part this one because we have more we have to place these directives that we have here So just as it indicates here this will be executed when everything is already loaded that is in our case the Livewire javascript is already loaded

@livewireScripts

Since it no longer works the document onload function used to work before we could expand that but it is no longer working for me in the current version It is also simple just place another tag on top of the script tag and that would be all In the same way in the next class we do a test with this and from here we can do whatever we want with the object or with the javascript part that we have not seen anything about

This Livewire JS to listen for changes in the components is useful to show some confirmation notification or something like that with a toltip or popup notifications etc

That is some update happens on the server you paginate or delete a record and you show a popup message to indicate the operation performed

Ultimately what you are going to do there is up to you I really do not have any implementation for the current application that we have to do something interesting there simply here you could listen to the event:

// Dispatch an event to any Livewire components listening...
Livewire.dispatch('post-created', { postId: 2 })

// Dispatch an event to a given Livewire component by name...
Livewire.dispatchTo('dashboard', 'post-created', { postId: 2 })

// Listen for events dispatched from Livewire components...
Livewire.on('post-created', ({ postId }) => {
   // ...
})

Video Transcript - Hooks in JavaScript

Let's try here a kind of life cycle as I was telling you that we have here on the client side. Remember that before we saw here everything that was the hydrate methods and so on and now it is something similar to that but in this case on the client side since it is already written. So here I am going to ask you to go to the repository and copy this code or at least that you want to write it. I am not going to write it. I am not going to waste 10 minutes on this to necessarily lengthen the video but basically:

@script
       <script>
           Livewire.hook('morph.updating', ({
               el,
               component,
               toEl,
               skip,
               childrenOnly
           }) => {
                console.log('morph.updating')
                console.log(component)
           })

           Livewire.hook('morph.updated', ({
               el,
               component
           }) => {
               console.log('morph.updated')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removing', ({
               el,
               component,
               skip
           }) => {
               console.log('morph.removing')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.removed', ({
               el,
               component
           }) => {
               console.log('morph.removed')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.adding', ({
               el,
               component
           }) => {
               console.log('morph.adding')
               console.log(component)
               console.log(el)
           })

           Livewire.hook('morph.added', ({
               el
           }) => {
               console.log('morph.added')
               console.log(el)
           })
       </script>
   @endscript

I was telling you before we have methods for when they are being updated, for when they are being removed, we will see exactly what it prints here and when they are being added, whatever you want to do there depends on you, really, some script, some function, some event, something visual that you want to do, launch a rocket to the moon, I don't know what you want.
The first thing is that if I come here, which is the recommended page to do this experiment, we have a lot of mobility. Note that we have no errors, so everything is perfect. Remember that this directive is to indicate when the Livewire javascript is already loaded and we can now use Livewire features.

Since obviously this is not part of the basic javascript pi, then it would give us a nice error if the Livewire javascript has not been loaded as you are seeing on the screen, then you have to place it there, and from here if you want to use the $wire object, for example, you can do so.

Place the following script:

@script
       <script>
         $wire
       </script>
@endscript

Now move on to pagination, update something here some messages would appear based on the action performed, if using the filter the pagination component is removed, then you will see that the remove event is executed and so on for the rest.

13-10-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Laravel Livewire - Introduction to JavaScript