I came across this thread while seeing the same issues (in 2024). I think it might have been caused by not loading the vex css. In case it helps anyone, this is the working setup I ended up with (this is an old project using webpack – I assume it’ll be a bit different with esbuild):

(cd assets && npm install --save vex-js vex-dialog)

New file assets/js/confirm_dialog.js (for tidyness):

import vex from "vex-js"
import vex_dialog from "vex-dialog"
vex.registerPlugin(vex_dialog)
vex.defaultOptions.className = 'vex-theme-os'

function init() {
  document.body.addEventListener('phoenix.link.click', function (e) {
    e.stopPropagation();
    var message = e.target.getAttribute("data-confirm");
    if(!message){ return true; }
    vex.dialog.confirm({
      message: message,
      callback: function (value) {
        if (value == false) { e.preventDefault(); }
      }
    })
  }, false);
}

export default { init: init }

In assets/js/app.js:

import ConfirmDialog from "./confirm_dialog"
…
 $(document).ready(function() {
   …
  ConfirmDialog.init()
  …
})

In assets/css/app.scss:

@import "../node_modules/vex-js/dist/css/vex";
@import "../node_modules/vex-js/dist/css/vex-theme-os";

yeah i forgot i wanted to post this here somewhere

@kerryb the problem with the vex solution lies in the fact that e.preventDefault needs to be instant, the event handlers are instant you can’t really await on them. Hence in my implementation i prevent it if it has a data-confirm and then re-trigger on the success case, you could adjust it based on your modal/dialog, i just used the native dialog method and created promise with closures to handle the results.

Also, my implementation just puts the markup dialog into the html markup as a live component. You could put it into a template tag and create it a dialog from there. ofcourse make sure to remove the dialog after resolving it.

It’s been merged, should be part of the docs on the new version of liveview