0.15 Notify with HTML

  • I also miss the ability to add HTML to an alert. Are there any plans to add HTML support to the new Notify component?

  • This post is deleted!

  • @akaryatrh Yes, setting the Notify plugin inside the quasar.conf.js is not sufficient. I need to declare import { Notify } from 'quasar' in my vue file to make it work.

  • If not already done, you guys should open issues on https://github.com/quasarframework/quasar/issues

  • Ok, just did.

  • Admin

    1. Installation. Required. http://quasar-framework.org/components/notify.html#Installation
    2. Usage: http://quasar-framework.org/components/notify.html#Basic-Usage

    Now, I see following complaints:

    1. Not supporting HTML markup. Yes, because Quasar needs to make your app be protected from Javascript injection.
    2. You probably want HTML markup because you need multiple lines. First, according to Material Guidelines, the notification needs to be short. As short as possible. It’s not a full-blown alert message. Having a notification popping up and covering half of the screen defeats its purpose (and it’s also bad UI). Use a Dialog for these cases. Notifications are a “soft” way to inform user something has happened. Add a button to it for “More Info” if you have to. Or use the details prop, but be short with it.
    3. "I added Notify to quasar.conf.js, but I still need to import it from Quasar". This applies to the usage outside of Vue files. And you need to import it where you use it in this case. How else would you reference the Notify object??? You may ask yourself: but why do I also need to add it to quasar.conf then? You need to understand that Notify is a Quasar Plugin, so it needs to do some initialisation before it can be used. This is why you need it in quasar.conf.js.
    4. this.$q.notify does not work in a Vue file. I still need to import it from Quasar??". Where are you using this.$q.notify? Inside the Vue component definition, or outside of the export default {...}. Notice the usage of this!! It has meaning inside of the Vue component definition or in your vue template, not outside of it. If you need it before export default {...} then yes, you need the “outside of a Vue file” usage, because your scope is not the Vue component scope…

  • Thanks for explanation. Must have messed up something (don’t know what exactly)…, since now it works.

    I used to use rgba notation for the background (and have opacity feature this way), it seems not possible to set color using rgba notation with notify, correct (and why not…)?

  • Notify only supports colors from the quasar color palette

  • I noticed, and I miss rgba dearly.

  • I used the HTML property within Alert to bold the important part of the message, ala “Do you really want to delete <b>whatever</b>?”

  • @rstoenescu thanks for the feedback. But dialog doesn’t support HTML either anymore.
    And as mentioned above, I need to use HTML in alerts for emphasis.

  • Admin

  • To echo @jeffatef and @Nicholas, I also used the HTML property for emphasis on certain parts of the message. Although I also found it useful for adding hyperlinks within the notification text (I could add a button for this, but I believe a link would provide a better UI in my case). I understand the concerns about Javascript injection, but are there currently any alternative ways to implement these two capabilities into a notification?

  • To @jeffatef, @Nicholas, and anyone else looking to add emphasis to their alerts, here’s the workaround I’m using. Basically just modifying the DOM directly after the notification is created. I’m still fairly new to JS so there might be some downside here (aside from injection) that I’m missing, but it seems to work well.

    function createAlert(html, type) {
      // html: string, valid HTML to be used as the alert's text
      // type: string, choose 'positive', 'negative', 'warning', 'info'
      const alert = Notify.create({
        message: '', // text is updated later
        timeout: 0, // forces user to dismiss
        type: type,
        actions: [
            label: 'Dismiss',
      // use setTimeout(function, 0) to ensure element is created by the time we add HTML
      setTimeout(function () {
        // the div containing the text has no class or id, so we first get its parent
        // based on its classes
        const el = document.getElementsByClassName('q-alert-content col self-center')
        // then we update the html of the most recently added notification
        el[el.length - 1].firstChild.innerHTML = html
      }, 0);
      return alert

  • @mds1 Yikes! That’s certainly a nasty solution haha. I’ve decided to hold back from upgrading to 0.15 until these features and/or proper workarounds are documented (plus other bug fixes 😛 )

  • For the reasons mentioned above, html messages are not coming back. Maybe we’ll add a classes prop so you can further customize text, but that is about it. No more html as strings

  • Sorry for comments a 5 months discussions. My suggestion or advice is to use Markdown for customized texts. Can anyone points me if it is possible to do Javascript injection on Markdown using this approach. Can I help to implement it?

  • I think that is up to developer the choose to use html or not… in some case is very useful!

Log in to reply