A simple example of Alpine.js code is not working properly in Phoenix 1.6 LiveView

Phoenix Forum Questions / Help
, ,
16

YES!!! It finally works. Thanks a lot.

For people who will encounter similar problem your app.js should look something like this:
Also, don’t forget to download the alpine.js file and save it in assets/vendor/ folder as alpine.js or something like that.

import topbar from "../vendor/topbar";
import Alpine from "../vendor/alpine";

// Alpine
window.Alpine = Alpine;
Alpine.start();

let csrfToken = document
  .querySelector("meta[name='csrf-token']")
  .getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to);
      }
    },
  },
});
6 Likes