Alpinejs in Bootstrap Studio

Hello users!

The other day I found a small new javascript framework. I am not familiar with any JS framework, but this one is really easy to start on. I wonder how to implement it in BSS, and I tried with Custom Code Component. On my surprise it worked perfectly soon as I copied the component from internet.
I was so exited, and want it to share it on this forum.
I made a few examples to show you and give you something to play with.
Happy Coding!

1 Like

Thanks for the share @Marinator

The Alpine Js library is sure not for Bootstrap Studio.
All the components in Alpine you already have in Bootstrap, why would one add a external js library and have to add custom code for many components like a Modal,Dropdown,Tabs,Tooltips, Carousel… which you just can drag and drop in Bootstrap Studio without any extra js library as Alpine.
An Alpine project is good if you don’t want Bootstrap

Not entirely true, alpine provides more than those components, I don’t even think components are their main selling point. I would say it’s more like a new reactive jquery that adds js functions to bootstrap’s css framework, it’s great.

I played around with AlpineJS in combination with BootstrapStudio some time ago, but found that it didn’t really work. It could work, but BSS doesn’t support the template tag, which would be necessary for AplineJS (loops, conditions). See <template>: The Content Template element - HTML: HyperText Markup Language | MDN
The only way to make it work would be to always use Custom HTML, but that makes a mockery of the concept of the program and, more importantly, the usability. Unfortunately.
For these purposes, however, you can use VueJS and it actually works amazingly well.