Setting up a project and installing the Alpine JS CDN

I have already clarified a little what Alpine js is that allows us how we can install it and I also told you a little about what the combination of alpin with Livewire is, which is the purpose of all this. We are going to continue creating a small project so that later we can do some experiments with it and precisely be able to know a little more about what this framework would be. So for that, as I mentioned in the introduction, we have two ways: one is using node and the other is using the CDN, really for a real project. There is no excuse not to use node. This would be the best option since with this we have all the advantages that the node environment offers us. But for these cases where we want to experiment a little, I would say that the CDN part is quite good for us. There is no need to complicate things much with what Node would be. So that is the one I am going to use. But perfectly, if you want to use this one and even do all these developments on a separate page in the iw project, feel free to do so. If you want to have everything there, I am going to do it here separately so as I tell you, not to mix things up so much. So the only thing I ask you here is that you can use this one. You can create a new Visual Studio Code window here or add it to the other project as you wish.

To use Alpine JS, we can do it through Node:

$ npm i alpinejs

Or through the CDN:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

The CDN is going to be the path that will be used in this book as it is the simplest and therefore the most recommended to start with.

An application in Alpine consists of two parts:
The declaration of the data, using the x-data attribute.
The functional part, which is using the logic that you implement using Alpine's features.

Alpine is based on components, which are independent of each other and are included in the x-data block as we will see.

X Data the key to Alpine components

Here is the click event just like it happens with Vue and similar and here we do as they say the javascript remember that in Vue we can place the method or directly the expression in this case here we place the expression that would be normal in javascript the variable that we declare here above equal to true would be everything then based on what is explained here this will be displayed just like it happens with Vue this is here when this is true all this will be rendered if it is false it simply will not be rendered, this is the example from the official documentation:

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>
 
    <span x-show="open">
        Content...
    </span>
</div>

That's what we do, we go back here and reload, there we have the button, notice that if we click on the button our SPAN appears with the display none, which is what I was telling you in case you haven't heard of Vue, well, you don't know what this does, that's the difference between IF and SHIW, although we'll see that later, what this does is hide it using a display none, as you can see.

16-11-2024 - Andrés Cruz

En español

• Category
• /
• JavaScript
• /
• Setting up a project and installing the Alpine JS CDN