Update LiveView for Alpine.js 101

Alessandro Di Maria — Sun, 04 Jul 2021 15:24:34 +0000

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();

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); 
      }
    }
  },
})

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

DEV Community: Alessandro Di Maria

Update LiveView for Alpine.js 101