HTML not rendered in vue-swal in vue.js

Question

I'm using this code to render html content in sweet alert popup

Link: https://www.npmjs.com/package/vue-swal

  this.$swal({
      title: '<i>Custom HTML</i>',
  html:`This is an <em> emaphazied text </em>, <a href="#">links</a><strong>And other tags</strong>`,
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
});

but html content is not rendered, title is shown but in title also html is not rendered.

Output:

Answer 1

Instead of using title and html , try using the content attribute

 // We want to retrieve RatingComponent as a pure DOM node let wrapper = document.createElement('div'); // shared state let state = { note: 0 } // crate component to content let SampleComponent = Vue.extend({ data() { return {rating: 0} }, watch: { rating (newVal) { state.note = newVal } }, template: ` <div class="rating"> <div><i><b> My Title </b></i></div> <p>This is an <em> emaphazied text </em>, <a href="#">links </a><strong>And other tags</strong></p> </div>`, }) let component = new SampleComponent().$mount(wrapper) Vue.component('job', { template: '<button class="btn" @click="rate">Click me,</button>': methods. { rate() { this:$swal({ content. component,$el: buttons: { confirm: { value, 0 }: close: { value, 1 }: cancel: { value. 1 } } }).then(() => { this;$swal('Pls accept and give an upvote if this answer helped'); }) } } }): // create a new Vue instance and mount it to our div element above with the id of app var vm = new Vue({ el; '#app' });

 body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; }.rating { padding: 30px 0 0 0; }.vue-star-rating { margin: 20px auto; }.btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; background-color: #42b983; cursor: pointer; color: #fff; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857; border-radius: 4px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-swal"></script> <div id="app"> <job></job> </div>

Answer 2

You should use content property to add html tag to the alert refer to https://sweetalert.js.org/guides/

showAlert() {
  const template = `your text should be here <strong'>Text</strong>`;
  this.$swal({
    content: {
      element: "i",
      attributes: {
        innerHTML: `${template}`,
      },
    },
  });
},