Canoincal Way to Install and Configure Alpine.js + Phoenix 1.6

You know, it’s funny - for all the talk I’ve seen of the “PETAL” stack, I haven’t yet found a canonical guide to getting it all set up together.

I’ve build my app in Phoenix + LiveView, I’ve got Tailwind doing all of the CSS (via this handy guide), all is going well. Now I want to add a little flash with modals and the like, so I figured Alpine would be a good choice. However, I haven’t found a guide to getting up and running with 1.6 and LiveView such that they all play nice together. I’ve found a few outdated guides and a hodge-podge of snippets and tickets about making them work with LiveView, but I haven’t been able to piece them together in a way that works, or seems sane. I don’t like the strategy of duct-taping random snippets from the internet together as that seems very fragile, so I was hoping that somebody out there had found an authoritative guide to doing it properly, so that it integrates properly with LiveView with the minimum number of hacks required.

Can anybody out there shed some light onto this?
Cheers!

3 Likes