Alpine JS and Laravel Livewire importance explanation and use together

We when we create a project in Livewire We also have an integration with alpine js that you may not know about I also have a short book that a separate Costa has about alpin in case youre interested although theres also a lot of material on the internet so in the same way alpin is a kind of View In a way its a clientside framework that also allows us to work on a base so it offers us a very simple integration also a very light framework with which we can perform operations such as clit events to change states and so on Its an active framework so thats the interesting thing about expanding this type of technology And when for example we click here the state will automatically change without us having to do that step manually In the same way now that we start working with alpine youll see a little bit of the sense of all this but basically here I think this example introduces quite well what alpin is with alpine We can say that its a fundamental difference that we have with Vue We can optionally define in the html what would also be the logic that is in this case as you can see Here we are defining what the Data is with which we are going to work at the level of this component this block of HTML And in this scope that is in this scope defined by the SPAN we can use this variable defined here called enable

<span x-data="{ enabled: false }">
   <button @click.prevent="enabled = !enabled">Toggle</button>

   <template x-if="enabled">
       <span x-data="timer" x-text="counter"></span>
   </template>
</span>

In this case it is to show or hide a counter that we have here also defined an html basically by means of this conditional I think it is quite expressive here for example we are defining a click event that what it does is to make the token, that is to say invert the selection that if this is being shown then it hides and vice versa and really there is little more to say you do not need to understand alpine in the same way everything that we are going to implement I am going to present it to you little by little but it is important that you understand that we have here an integration with alpine if we come here to the official documentation you will see that you have a section for the pin in which obviously it allows us to use this framework that I quickly introduced you a few moments ago with Livewire and this makes all the sense in the world since in the end Livewire Even though it is a server-side technology But what happens with the client when we want to be able to hide some html elements to be able to apply some animations some smooth transitions and this is where alpine comes in here So this is the equivalent in Livewire that in inertia we use Vue.

So in this case, since we mainly use Livewire, the client part is missing, the part of precisely that, to be able to manipulate the HTML DOM, and for that, what is used is again Alpine, integrated by default, and that is a bit what I wanted you to understand, and we are going to see that, well, here, unfortunately, the documentation is a bit abstract, because just defining data in this way is not enough, since…

In the end we would have Alpine on one side and Livewire on the other

So we are going to want to integrate both things so to speak and by things I mean what are the properties that we expose Remember that here in our example we are exposing what is the stet well I have it here in general that our case of interest that is the one that will indicate to us What step We are going to show at a certain time and it is precisely that data which we are going to need to be able to manipulate Or at least read from alpine and that is where the socalled object comes into all this which is a way in which we can do multiple operations between clients in stores to the pin since this comes in this case also forming part of alpine Although it is an addition that will make it redundant it is added by Livewire But we can for example access properties to methods Call methods perform operations in case it is an asynchronous operation we can also do it in this way through javascript emit events and a lot of operations that in part Appear here in the official documentation of lwg with alpin Well we are going to see this a little later since I think I have been very abstract So we are going to start by doing a small example and little little by little we are going to introduce the rest of the features Obviously the best candidate that we have here is why I started introducing Alpine is this selector block for the steps which is where precisely we are going to want to manipulate that logic in order to smoothly indicate that look this one is no longer active but it would be this one and it is precisely by using the pin in all this here you can see that the design was changed for good according to what we established before for step two and that is what we are going to want to do in alpine So at least for the moment or based on what has been explained what I want you to be clear about is that This is the block with which we are going to work this one defined by this one would be So from here on This is going to be our alpine component and what is the first thing that we define in a pin component is usually the Data the Data with which we are going to want to manipulate this that we have here either to show or hide in this case to move What is the active class based on some condition So here we define the X datata important point we could also define the JavaScript block separately as we do with Vue But this is as they say one of the main features that we have in Alpine since Alpine is designed so that precisely when we want to make small designs like this it is not as intrusive as other frameworks such as Vue or even React which is much more intrusive than Vue

So the p is like who says exploiting that market that we want to make small components that do some simple functionality so for that we use the pin and in the same way now that we do the implementation we can compare it a little with what would be native javascript well here we define the Data in this case it would be good defined in an object like almost everything Yes in javascript when we want to define some structure since here we can define multiple variables we are going to indicate that it is called as active that it is active at the moment we are going to establish a local initialization here that is to say that this one that is here is only going to be understood here in the client understand when we are rendering our html here therefore this at the moment has absolutely nothing to do with Livewire and it was what I was telling you before later we will see what is the integration with lightware to be able to read that property or that value that we have here the State and therefore from here based on this value we can indicate which class is active then it is more or less the same as we do with View that we place two points because the following attribute is going to be evaluated in In this case the attribute is the class attribute and in the class attribute well more or less the same thing we do in Vue Im going to put the quotation marks sorry the Equals as well and here we evaluate a condition There are several ways but one of these is simply to ask Here you would place the class that will win In this case it is called active which is the one we have here right now we remove it from here

<div class="flex" x-data="{ active: 1 }">

But it is to have the reference and So this will be established if the following condition is met This has always shocked me a little because I see it as the other way around First I would place the condition and then the class like the value at least thats how were used to First the conditional is evaluated And then the value but here it is expressed it could be said the other way around at least according to my judgment So here we evaluate the condition Were going to place yes Im going to stop it at an integer in case we have problems there with the pars in active type that refers to this Active If you want for the moment you can place a two here and this Im going to put a three so that the names dont get mixed up so much So here we are asking is for this variable that we have defined up here We place active again for the variable if it is equal to a certain value In this case as is step one we have to ask if it is step one since we are going to ask this same thing in each of the steps So if we do this Well here I recommend that you have your javascript console open since you will see any error here

<div class="flex mx-auto flex-col sm:flex-row">
    <div class="step" :class="{ 'active': parseInt(active) == 1 }">
        {{ __('STEP 1') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 2 }">
        {{ __('STEP 2') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 3 }">
        {{ __('STEP 3') }}
    </div>
</div>

We dont see anything good Of course because I put a weird name or a name that doesnt exist but were going to inspect here Notice that here appears well the active 3 which is the one I had there and the active 2 which is exactly what Im placing here fi a little quickly Im going to place here Anything So you can see that this is completely true that is to say active has the value of one and that is what we are evaluating here So here you can see that the class is assigned as I told you this same thing but now Im going to place the correct class which is active again here you put Anything but for it to make sense it has to have some style applied which is what we want and it will appear active now at this point you can see that we dont have to place this whether the class exists or not and you will see that the design works So you are going to copy what we did here and you are going to replicate it in all the steps here Note that it is important that this is not an attribute as who says legal of html This is something from alpin therefore alpine when evaluating This is not that is creating the class attribute twice which would cause a problem in html that is to say in html we cannot define classes twice because it will take one of them usually I think it is the last one not the first in this case you can see that the first one I saw is not this this is an alpine attribute something similar happens in View and those client frameworks but here we are asking for the corresponding steps since at the moment they would all appear active which does not make sense to us our application logic has to be in the following way in which we ask if this is one if this is two and if this is three I dont know if I can and well in this case you will see that only the one we have active here will appear if here I put three then the third step will appear active and you can see a little bit the sense of all this we should be able to remove it because regardless of the type here it does work well but well it was in case we have a problem there since even though this is a String as we are not placing the triple equality it is not asking for the type

<div class="flex mx-auto flex-col sm:flex-row">
    <div class="step" :class="{ 'active': parseInt(active) == 1 }">
        {{ __('STEP 1') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 2 }">
        {{ __('STEP 2') }}
    </div>
    <div class="step" :class="{ 'active': parseInt(active) == 3 }">
        {{ __('STEP 3') }}
    </div>
</div>

Although for now at least Im going to keep it to make a slightly more interesting example when we present the wire object here which is the one that will allow us to read so to speak the values that we have defined here for some properties In our case what interests us is the stet So thats a little bit what I wanted to tell you about here to make it a little bit more interesting Here too in the official documentation we have a clck event that we could implement Something similar And right now I saw it a few moments ago or over here Here is precisely this as if it were a counter so obviously this would no longer go as part of the development were not going to do it But I think that it seems interesting to me then within the scope that in this case would be this one we have to place our button This is to give you a quick introduction to the most basic of alpine to the most basic of alpine and with the cit element as you can imagine what it does is execute something When we press this button in this case what interests us is to increase our variable You can do anything even call a method but again its something simple usually what we do and Im going to want to increase the active one Well place one so that it comes out of Range we come back here Well this I put a full so that it is read pending that we do not have errors Here I have the button And look at what it does How would you do this with javascript basically by clicking on it and increasing some variable that you have defined there you have to read which step has the class defined here of active you would have to remove and then read What is step two in some way either you ask for an array of this and through the array you ask for the position well two in quotes But it would be one because it starts at zero and you set the class as you can see It would be much more manual in this case or the fundamental difference or the advantage that we have here instead of using what would be pure and hard javascript is that we can use the reactive component which is precisely that which you just saw that automatically when the value of active changes automatically around here all the references to said style are also updated here important again that this is in the scope as I mentioned before because if you place it outside Then it would no longer work because it was in another scope eh Here it is you can see that even around here you are going to have an error which tells you that active is not defined and this is already an error of Well actually it is from alpine Although here it is I expand the lare since I think it is quite Well here you can see that here the pin expression error appears but the javascript is from they already wanted some integration there I dont know if they took the alpin framework and merged it with their development which they did but there you can see a little bit of sense of all this even though the bases of alpin are also applied here in the strange javascript of Livewire with alpine So with that I think it is quite clear what the pin has to do with all this I do not want to lengthen the video any more because I do not want to make it so heavy So in the next one we are going to see or we are going to give here the meaning to this initial value of active that has to be the one we have defined here in this one we will see that in the next class

07-10-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Alpine JS and Laravel Livewire importance explanation and use together