Support v-html in Toasts

[StirStudios]

Description

At the moment if we are using a backend and we have HTML markup returned for a toast it is rendered as plaintext. Is there a way for us to use the slot to render raw HTML?

toast.add({
  title: getToastTitle(message.type),
  color: getToastColor(message.type),
  icon: getToastIcon(message.type),
  close: true,
  duration: 5000,
  slots: {
    description: () => h('div', { innerHTML: message.message }), // Render raw HTML directly
  },
  onDismiss: () => messages.value.splice(index, 1),
})

Any help or guidance would be fantastic.

[huongphamx]

I don't think this will be implemented. Notifications should be simple for easy reading, why you need to show HTML? Can you show example from other UI libraries which support that?

[StirStudios]

Agreed I cannot find examples, however sometimes an <em> <b> or a link are added and in this case it is not possible. If I find examples I will add it here.

[huongphamx]

I personally won't add em or b tag in notifications, but maybe someone may need it.
In case of link, I won't add to notifications' text, too. But you can use actions to add buttons with to props for your link.

[StirStudios]

Fair enough, we have opted for an alert instead and will note the button approach for toasts!

[benjamincanac]

You will now be able to pass a VNode to title and description as such:

import { ULink } from '#components'

toast.add({
  description: h(ULink, {
    href: 'https://github.com/benjamincanac',
    target: '_blank'
  }, () => h('span', { class: 'font-bold' }, 'benjamincanac'))
})

I also noticed the onDismiss event you added in your example, unfortunately this doesn't exists but I just pushed 089185f so you can pass all Toast events (https://ui3.nuxt.dev/components/toast#emits) to useToast().add(), example:

toast.add({
  "onUpdate:open": () => {
  },
  onPause: () => {
  },
  onResume: () => {
  },
  onSwipeMove: () => {
  }
  ...
})

[StirStudios]

@benjamincanac thank you so much for your help and solution. Love what you guys are doing!!