The library in my case is vex
. I ran npm install vex
and followed vex’s installation docs by adding below to app.js
:
import vex from 'vex-js'
vex.registerPlugin(require('vex-dialog'))
vex.defaultOptions.className = 'vex-theme-default'
I found this library in Phoenix.Component
docs, in the Overriding the default confirm behaviour section, also in app.js
:
// listen on document.body, so it's executed before the default of
// phoenix_html, which is listening on the window object
document.body.addEventListener('phoenix.link.click', function (e) {
// Prevent default implementation
e.stopPropagation();
// Introduce alternative implementation
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);
Using data-confirm
attribute, above confirm()
gets called, but its CSS is missing. I’ve copied vex.css
and vex-theme-default.css
to assets/vendor/vex/
. Where and how do I now include these two files? Like so, in app.js
?
import '../vendor/vex/vex.css'
import '../vendor/vex/vex-theme-default.css'
Doh, I just need to import them from app.css
:
@import "../vendor/vex.css";
@import "../vendor/vex-theme-default.css";
Let me know if there’s a better way to import the CSS. I presume assets/css
is meant for an app’s own CSS and vendor/
is a better place for this case, for vex
.
Phoenix 1.7.2
LV 0.18.18