v2.3.0 - v2.3.2

Release notes

The next minor release of Notivue introduces a couple of cool features plus some improvements:

• New (Core): Add avoidDuplicates config option
• New (Core): Expose isStreamPaused internal signal
• New (Built-in Notifications): Add NotificationProgress drop-in component
• Refactor (Core): Use window's focus/blur events instead of visibilityChange
• Improve (Core): Remove workaround for lightningcss keyframes minification (fixed upstream)
• Improve (Core): Add singular-named import aliases for any exported CSS file
• Fix (Built-in Notifications): Fix setting fallback accent color when computing --nv-accent CSS variable

The above new features can be summarized in this short video:

preview-2.3.0.mov

avoidDuplicates config option

It is now possible to prevent the creation of notifications already displayed in the stream or already awaiting in the queue (duplicates).

I've found this feature extremely useful in scenarios where the same notification might be repeatedly created (external services errors, frequently updated settings), creating unnecessary noise in the UI.

Since the whole implementation required just a few lines of code, I believed it was a good trade-off implementing it.

While this option is disabled by default, it can be enabled by setting avoidDuplicates to true in Notivue's config:

const notivue = createNotivue({
   avoidDuplicates: true
})

Once enabled, if a notification like the following is pushed to the stream:

push.error({
  title: 'Error',
  message: 'There was an error sending your message, please try again.'
})

...and a notification with the same title, message and type is already displayed, Notivue will immediately make screen readers announce it again without rendering a new one.

Then, it will replace the remaining duration of the visible notification with the duration of the duplicate one (like "restarting" it).

💡 By design, this feature only supports static notification types (success, error, warning, info) and not dynamic types (promise, promise-resolve, promise-reject).

If using Custom Components, it is possible to "detect" when a duplicate is pushed by watching the duplicateCount property of the notification item (in your custom component setup function):

watch(
   () => props.item.duplicateCount,
   (newVal) => {
      console.log(`Total duplicates: ${newVal}`)
   }
)

For example, the above property could be used as component key to play/restart an animation everytime a duplicate of that notification is pushed (and its duration is updated).

Expose isStreamPaused internal signal

Notivue now exposes a readonly reactive proxy of its internal isStreamPaused signal, enabling consumers using Custom Components to create progress bars and advanced side-effects.

Check the docs website on how to implement a progress bar in your custom notification.

Wrapping up: <NotificationProgress /> drop-in component

Notivue's built-in Notifications now accept a default slot which can be used to add a new drop-in component named NotificationProgress (and anything else you'd like to) which fully leverages the new APIs introduced above.

All you have to do is to import it and pass the notification item to the item prop:

<script setup>
import { Notivue, Notification, NotificationProgress } from 'notivue'

import 'notivue/notification-progress.css'
</script>

<template>
  <Notivue v-slot="item">
    <Notification :item="item">
      <NotificationProgress :item="item" />
    </Notification>
  </Notivue>

  <!-- RouterView, etc. -->
</template>

💡 Please note that the CSS must also be imported either in app.vue or your app entry point.