I just published a follow-on article showing how to use AlpineJS and Tailwind CSS to create LiveView modals.

If you are using the latest version of Alpine.js (v3), you will need to make some changes in how you set it up.

Alessandro Di Maria has a short guide on the changes you need to make in this article: Update LiveView for Alpine.js 101 - DEV Community.

You can certainly use localStorage from Alpine, as this article demonstrates: https://codewithhugo.com/alpinejs-localstorage-sessionstorage/. So if you are skeptical about pulling in another framework, it is probably good enough.

For me, Spruce is nice because it integrates well with Alpine, allows you to watch for changes in state, and it works with x-model.

The npm moves in mysterious ways.

Hi, I came back to say that I did the inclusion of Alpine in a slightly different manner. I’m using Alpine 3.2.1 and the snipped showed in the post helped, but didn’t solved all the problems I was having. So I’m leaving my snippet for anyone who comes across the same problem and can’t solve using the post:

Edit: I also should mention that maybe I have something wrong in my code that forces me to do things this way. I’m a beginner at Elixir/Phoenix, so if something looks off about this code or the approach, please, correct me

// FIRST IMPORT THE ALPINE MODULE AS YOU ARE USED TO
import Alpine from 'alpinejs';
// I'VE ALSO ATTACHED IT TO THE WINDOW OBJECT
window.Alpine = Alpine;

let liveSocket = new LiveSocket("/live", Socket, {
    dom: {
        onBeforeElUpdated(from, to) {
            if (from.__x) {
                window.Alpine.clone(from.__x, to);
            }
            
            if (from._x_dataStack) {
                window.Alpine.clone(from, to);
                // I HAD TO INITIALIZE THE TREE EVERYTIME IT UPDATES. 
                // I WAS FACING "Alpine is not defined" ERROR WHEN I DIDN'T
                window.Alpine.initTree(to)
            }
        }
    },
    params: { _csrf_token: csrfToken },
})
...
// DON'T FORGET TO START ALPINE AND DON'T PUT THIS SNIPPET
// INSIDE THE onBeforeElUpdate HOOK. 
// I KNOW THAT SEEMS IRRELEVANT, BUT IT COULD CAUSE A MASSIVE MEMORY LEAK
// BECAUSE IT WILL DUPLICATE ALL LISTENERS EVERYTIME THE VIEW UPDATES
Alpine.start()

Thank you for the help!