v1.2.0

Welcome to the next minor release of Notivue, which brings many new key features and various fixes and improvements.

What's new

Notivue Core

• Added support for enqueuing notifications using the enqueue config option. By defining a limit and enqueue: true, notifications will be queued once the limit is reached and displayed one-by-one as soon as a previous notification is dismissed. Guide and concepts.
• Added skipQueue push option to skip the queue and display the notification immediately.
• Added ariaLiveOnly to push options. This allows to push a notification without displaying it, but only making it available to screen readers.

Drop-In Components

Notivue now ships with two new drop-in components: NotivueKeyboard and NotivueSwipe.

• NotivueKeyboard enables proper keyboard navigation with great screen-reader support on custom notifications with more than 1 focusable element. It is meant to be used with custom components. Guide and concepts.

• NotivueSwipe allows you to dismiss notifications by swiping them away. I decided to write from scratch an ad-hoc, zero-config solution for Notivue, instead of suggesting a third-party library. It works with both built-in and custom components and perfectly integrates with the rest of the features, including NotivueKeyboard. If you were using NeoDrag, check how to configure NotivueSwipe instead.

As any other feature of this package, they're completely optional, so if you don't import them, they won't be included in your bundle.

Composables

Notivue now exports a useNotifications composable, which allows you to access a read-only reactive array of all displayed and queued notifications. It can be used to create side effects.

---

What's changed - ⚠️ Important

Starting from this release, Notivue doesn't render anymore the aria-live region for custom components by giving you full control on announcements.

If you were using Custom Components, to replicate the same behavior as the previous versions, simply pass the attributes to the node that wraps your message:

<template>
  <div class="MyCustomNotification">
    <p :role="item.ariaRole" :aria-live="item.ariaLive">
      {{ item.message }}
    </p>
  </div>

  <!-- ... -->
</template>

Or if using both title and message:

<template>
  <div class="MyCustomNotification">
    <div :role="item.ariaRole" :aria-live="item.ariaLive">
      <h3>{{ item.title }}</h3>
      <p>
        {{ item.message }}
      </p>
    </div>
  </div>

  <!-- ... -->
</template>

---

What's improved

Notivue Core

• Timeout handling logic has been rewritten from scratch, considering all of the above new features and interactions.
• Minification step is now performed by esbuild instead of terser (using Vite defaults). This increases by very little the whole bundle size, but improves my DX a lot.

Built-in Notifications

• Disabled keyboard navigation and removed focus styles on the dismiss button. More info here.
• Slightly darkened darkTheme colors.

Documentation

Added API Reference section to documentation website.

---

What's fixed

• Fixed a bug where passing an empty string as animation name would throw an error.
• Fixed a bug where calling item.clear method on the last notification would not resume leave timeouts.