Introduction to Alpine.js - First Component - x-data, Click event, x-show 1
Let's start this introduction to what would be alpine js first of all this introduction you can take, excuse the redundancy, as an introduction to the framework itself. Although remember that this is initially part of the Laravel Livewire course, it will be independent and therefore it is again an introduction to what would be Alpine js since we are going to create some projects from scratch working with Alpine directly and then later in another section we will link it with what would be Livewire since that is why I am doing this I am doing an introduction to pjs since Remember that it is part of what would be Laravel Livewire but again you can take it as if it were your own introduction to the framework and it has absolutely nothing to do with what would be Livewire, then with that clarified you can see this regardless of whether you are interested in learning Laravel Livewire or not.
Alpine very similar to Vue in several things
Okay, now that that's cleared up, I wanted to talk a little bit about what a warm frame would be. If we've already worked with Livewire, it shouldn't be much of a surprise, but I still think I'll give you a slightly more formal introduction. So Alpine js is another framework, and that's a key word, since today there are many frameworks for javascript, from different areas or different purposes, and this one is another. In the end, you can see it as a kind of Vue. I mainly mention Vue, because Angular and React are always a little more complex than Vue, but you can also start from those three, but they are lighter and easier to understand. The purpose of this is when Vue would be too big for us to use. You simply want to make small adaptations, then you can use this type of framework. It's that simple. Otherwise, it has a different structure, apart from being a little more modular, since it is again.
The purpose of it is to do simple operations, you can see that it is not necessary, you do not have to create Vue point components and anything like that, but directly from the same html you can create your pseudo components. To put it in some way, with a component in Vue it looks like a component in Alpine in the following way, they are always accompanied by what is the X followed by something else.
<div x-data="{ header:false }">
// Hacer Algo
</div>But in this case to associate what is a component itself we have to place what is x- followed by data then here as it happens with telwin although it is a different theory in which usually the bunch of classes are placed at the attribute level although we can also do it in a separate file here we also establish what is the javascript directly in the html.
We can create a block of written part in case you want to do something a little more complex since it also allows it but the final in a few words and comparing it again with frameworks like Vue which allows us to do alpine is to add that layer of reactivity to our html page so desired so when we change for example something in this property automatically based on some directives that we will learn later such as the before bif etcetera it changes here automatically it is that simple for the rest we also have events to be able to interact or for the user to interact with our page a good example of this is a model i.e. a dialog or a confirmation dialog as you want to see here:
<html>
<body>
<div x-data="{ header:false }">
Abrir un modal
</div>
***
<div x-data="{ fieldText:" Pon tu nombre" }">
Manejar un formulario
</div>
***
<div x-data="{ open:false }">
Abrir un modal
</div>
</body>
</html>
Actually, even though I have this text, I don't have it well specified, that is to say, I don't have the development implemented, but suppose that here we have again the data where we are going to place all the variables or whatever you want to call it that we are going to use at the level of this component that comes encapsulated here. Here we would have some conditionals or a conditional to verify if this is true. Well, here I have one that is more similar: if this is true then it opens the mode and if not, it simply keeps it closed, it keeps it hidden through that conditional. It is simply that type of operation that we will present later.
Events and directives, the secret of reactivity
Here the directives and so on we can get a little bit of the joke out of all this and of course here we also have what are the events and everything else click keyup event and everything else as for the attributes we also have several as I indicated to you the X datata is the key in all this which is the one that indicates that it is a component itself and there we define our variables And just like in Vue we have the x-show to show hide an element based on some good condition but only hide the Dif and not make it disappear as it happens with Vue and the x-if in this case. So that's basically it here This is the official page simply write here the pin js Well but well written to Pin js and you enter here in the first link Well not in the sponsored one but here in the first link and here you would have the page here we have what is the component which is the presentation that we have here this is a component in this case we have the X datata as I indicated an open defined in false if we hit a click that is to say a user event for the user to interact Then I set it to true:
<div x-data="{ open:false }">
<button x-on:click="open=!open">Dame un click</button>
<div x-show="open">
Oculto por defecto
</div>
</div>
This is the name of the button, it's nothing strange and here it would be the associated X that is to show this content, it can be an x-if an X in this case an x show but in the end when you click on it this would be displayed Unfortunately I think it does not allow you to run it But that would be the cover letter for the rest right here you can see here a little of what was talked about at the beginning, which is an extremely simple forward and therefore even here on the same official page on the direct page in the index it already defines its attributes, properties and methods because it is basically that, already knowing this we would already know the most important part of the pin, which is what we are going to cover in this course, as is, you can see the rest, take a look if you want, but we will see it little by little throughout the course. So I am not going to continue investigating a little here. So now that this is clear, the next point would be how the hell do we use it? We have, just like with Vue, the cdn option, which would be the one we are going to use because we are making a world here or through Noe, which would be the one we have somewhere in life, see npm Okay, I'm going to come here to install. Here is installation. As I was telling you, we can do it using the CDN option, which is good for testing, which is what we want to do. But for a real project, you can install it using Note, for example, and here it initializes it. So, that was the introduction I wanted to give you, just talk to you a little bit about the technology it offers, so we can use it, how it's built, and of course, how we can install it. So without further ado, let's move on to the next class.
- Andrés Cruz
This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso y Libro primeros pasos con Laravel 11 Livewire 3 + Alpine.js y Tailwind.css - 2025.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter