DEV Community

loading...
Cover image for Update LiveView for Alpine.js 101

Update LiveView for Alpine.js 101

Alessandro Di Maria
Ruby and Elixir Developer, currently diving deeper into reactive programming. Loves drawing with ink!
・Updated on ・1 min read

Today I tried to upgrade Alpine.js V2 to the newly released version 3 in one of my phoenix applications. As with major versions, the new alpine version introduces some breaking changes.

First, you need now to explicitly start alpine with Alpine.start().

import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();
Enter fullscreen mode Exit fullscreen mode

Second, and this took me some time to figure out, as it is not documented on the changes page, you need to adapt how alpine integrates with LiveView. Before alpine elements had a property __x, that now changed so that you filter now for elements with the _x_dataStack property.

let liveSocket = new LiveSocket("/live", Socket, {
  ...,
  dom: {
    onBeforeElUpdated(from, to){
      if(from._x_dataStack){ 
        window.Alpine.clone(from, to); 
      }
    }
  },
})
Enter fullscreen mode Exit fullscreen mode

That's it! I hope this works for you as well and saves you some time.

Discussion (0)