AlpineJS "loses" reactivity when rendered using <.live_component> Liveview >0.17

[codeanpeace]

I ran into something similar and the suggested updates to app.js outlined in the linked post fixed it. Note that window.Alpine.initTree(node) is added to both onNodeAdded and onBeforeElUpdated callbacks.

Adding new LiveView component ignores AlpineJS directives

So I figured where the problem is how to solve it. When a new element (component) is added to the page the onBeforeElUpdated is not called and therefore all Alpine directives are not initialized. To properly wire up Alpine for newly added DOM components make sure to add this callback to your socket config. dom: { // add this callback onNodeAdded(node) { if (node._x_dataStack) { window.Alpine.initTree(node); } }, onBeforeElUpdated(from, to) { if (from…