Sweetalert case about vue-awesome HOT 5 CLOSED

I've worked out a solution here:

https://jsfiddle.net/Justineo/0h3tsgby/

You have to make Vue dynamically compile a template including icon components (or other components) and mount them inside SweetAlert's boxes upon open (and destroy those temporary components before close).

By doing so you have to import the full build of Vue.js (which includes features for runtime template compilation).

from vue-awesome.

Vue compile is how you do it!
Thanks so much

from vue-awesome.

I think you can also render the icons at build time:

somewhere, globally accessible in your application

<div style="display:none">
  <div id="bug-icon-rendered">
     <icon name="bug"></icon>
  </div>
  <div id="user-icon-rendered">
     <icon name="user"></icon>
  </div>
</div>

and then, copying the inner html

let confirmationButtonText = document.getElementById('bug-icon-rendered').innerHTML;

from vue-awesome.

That's a bad practice IMO. Dynamically compile dialog content might not be the solution with best performance but it's more natural and it'll help keep the content reactive.

from vue-awesome.

Yes, I agree but I think it is the best solution for my app architecture, I like the solution you write in the jsfidle though, I learn something new today :)

from vue-awesome.