Insert string with v-html

[ianclever]

Please allow inserting plain html into the content, use v-html instead of plain text, to inject the content.

[cliftonlabrum]

What you describe would be convenient. You may already be aware, but a workaround to get HTML into the toast is to use a component. Below is an example.

//Wherever your toast is triggered
import { useToast } from 'vue-toastification'
import Toasty from '@/components/widgets/Toasty.vue'
const toast = useToast()

function showMyToast(){
  let content = {
    component: Toasty,
    props: {
      title: text.title,
      message: text.message,
      type: 'success'
    }
  }

  toast(content)
}

Then you can do custom HTML in your Toasty.vue component:

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Toasty',
  props:{
    title: String,
    message: String,
    type: String
  }
})
</script>
<template>
  <!-- Anything you want in here populated with your props -->
  <div class="toast">
    <div class="icon" :class="type"></div>
    <div class="inside">
      <h5>{{ title }}</h5>
      <p>{{ message }}</p>
    </div>
  </div>
</template>

I hope that helps.

[ianclever]

I've seen this, but in my case I have support for both toastr using vue and the version without vue, because on the system I work on, part is legacy, part is not.
In the case of the above example can I do this in the non vue version?

[ianclever]

Hi, I did the tests following your suggestion and it worked. Thank you for your help!
I just didn't need to use "defineComponent".