Notivue Versions Save

Release notes

What's new

Notivue, NotivueKeyboard - Both exported components are now wrapped in a ClientOnly component by default. Before this release, this was only applied to the Nuxt module auto-imported components.

Provenance Statements - Notivue is now published via GitHub actions using provenance statements introduced by NPM this month in order to improve supply-chain security and transparency.

What's changed

Notivue Core - Configuration properties have been converted from shallow refs to refs. This reduces a bit the bundle size and removes the requirement of calling triggerRef when updating nested properties such as config.notifications.global.

Nuxt Module - Streamlined type modules declaration and removed client-only versions of Notivue and NotivueKeyboard as they're now unneccessary.

NotivueKeyboard - Lowered the default value of maxAnnouncements prop from 3 to 2.

Package - The bundled output now only includes JavaScript APIs not greater than ES2015.

Release notes

• Fixed a bug where global notification duration set in Notivue Config was also applied to promises (which should always be set to Infinity) - #25
• Streamlined and improved readability of some tests

Release notes

New

• Core - Updated default enter/leave animations with a more visually appealing pair. If you still wish to use the previous ones, paste this code in a new css file and replace: import 'notivue/animations.css' with your file path.
• Built-in Notifications - Added an elevation effect to the close button on hover.

Fixed

• Core - Replaced 0 to 0.01 in any translate/scale/rotate keyframe transform property. This fixes a lightningcss bug that occurs if it is used by the end-user as css minifier (via Vite config).
• NotivueSwipe - Fixed a bug where the notification width was not computed properly if using transform: scale < 1 in enter animations, causing notifications to be cleared earlier.
• NotivueKeyboard - Fixed a typo that caused event listeners to not be removed in the onBeforeUnmount hook.
• Built-in Notifications - Fixed a bug where inline-end/start paddings and margins were not applied properly with dir=rtl.
• Nuxt Module - Hardcoded Animations and Position types in the module declaration as imported types do not work within Nuxt module declaration.

Changed

• Core - Refactored the logic to get/set prefers-reduced-motion and transitionData. They are now only updated when appropriate, improving performance.
• Notivue - Refactored the logic to add the clearAll class to the wrapper element. Now this is done the "vue-way" by passing a reactive value to the attribute, instead of using classList.add.
• NotivueSwipe - NotivueSwipe now doesn't call anymore item.clear method when the swipe threshold is met. Instead it first transitions the opacity to 0, then it calls item.destroy. This ensures that the leave animation is never called while providing an overall better UX.
• Core - Streamlined the store by removing some unnecessary code, reducing by little the bundle size.

What's changed

• Fixed a regression introduced in v1.3.0 where repositioning was not invoked properly when an element was pushed from the queue.
• Removed unnecessary configuration watcher in createNotivue.

Other

• Improve monorepo deps structure
• Refactor pushProxy / createPush to improve readability

Release Notes

What's new

NotivueSwipe - You can now choose which method to call when clearing the notification via the new destroy prop. By default is set to false which means that the leave animation will be played when clearing.

What's fixed

Notivue Core - Fixed a bug where queued promises were not updated properly due to a regression introduced in v1.3.0 - #21

Release notes

What's new

Nuxt Module Add addPlugin boolean to module options. This won't initialize the notivue store via createNotivue leaving to you the implementation while still providing auto imports. Can be used for example, to export the push reference if using ssr: false.

What's changed

Notivue Core The push object is now frozen to prevent accidental tampering.

What's fixed

Nuxt Module Hardcoded configuration types which were not retained when imported from outside.

What's new

1. Direct push in single-page apps

Starting from this release, you can now push notifications from any file/component without worrying about calling usePush in the setup function of a Vue component (only in single-page apps).

You should now be able to call push from virutally anywhere in your client-code as long as such code is used in the Vue App.

While usePush and notivue can still be used as usual and updating to 1.3.0 won't break your code, you should update it as follows:

- import { notivue } from 'notivue'
+ import { createNotivue } from 'notivue'

const app = createApp(App)

// app.use(...), app.use(...), ...

// Place it at THE END of the app.use() chain, just right before app.mount()
- app.use(notivue)
+ export const push = createNotivue(app)

Remember to state export const push... at the end of your plugins chain, just right before calling app.mount().

Then in any file, component or template:

- import { usePush } from 'notivue'
+ import { push } from './main'

push.success('Something good has been pushed!)

Check the documentation website on how to configure push auto-import.

---

2. Nuxt Module

Notivue now ships with a nuxt module that you can add to your nuxt config, it provides automatic plugin installation, auto imports and built-in client-only mounting of Notivue root components.

Migration:

1. Update to latest via pnpm add notivue@latest

2. Delete plugins/notivue.client.ts and any auto-import previously configured via files or nuxt config.

3. Install the module:

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  css: [
    'notivue/notifications.css',
    'notivue/animations.css'
  ],
  notivue: {
    // Options
  }
})

4. Delete the <ClientOnly> wrapper around Notivue components and most important, any component import:

<script setup>
- import { Notivue, Notifications } from 'notivue'

- <ClientOnly>
  <Notivue v-slot="item">
    <Notifications :item="item" />
  </Notivue>
- </ClientOnly>

4. Restart your dev server with: npx nuxi cleanup && npx nuxi dev

Please note that usePush must still be used on Nuxt installations.

---

3. Add onAutoClear and onManualClear push callbacks

push.success({
  message: 'This is a sucess message',
  props: { isCustom: true },
  onAutoClear(item) {
    console.log(item.props.isCustom, item.message) // true, 'This is a sucess message'
  },
  onManualClear(item) {
    console.log(item.props.isCustom, item.message) // true, 'This is a sucess message'
  },
})

Release notes

What's new

Notivue Core

You can now pass a ref to both message and title push options. This allows to create notifications like this one:

const message = ref('Begin uploading...')

push.promise(message) // or push.promise({ message, title...

message.value = 'Uploading file 1/4'

// ...

Built-in Notifications

Add hideClose prop, which is by default set to false. This can be handy if you're lazy, and you don't want to import, clone and edit the icons object.

NotivueKeyboard

Add maxAnnouncements prop, which is by default set to 3. Leave notifications that announce the exit from the stream and the ability to re-enter using the combination key are now pushed only the first three times.

---

What's improved

Built-in Notifications

• Set the default width of the notification container to auto. After taking a look at the projects using Notivue, I noticed that the majority of the users are pushing notifications with very short messages.

If you prefer to have a fixed min-width, replicate the previous behavior by setting the variable --nv-min-width to your theme:

<Notifications
  :item="item"
  :theme="{ ...materialTheme, '--nv-min-width': '360px' }"
/>

• For the same reason, increased default font size from 0.925 to 1 rems and default spacing from 0.5 to 0.625 rems.
• Slightly darkened materialTheme background colors to improve accessibility and match WCAG 2 Contrast and Color Requirements.

---

What's fixed

NotivueKeyboard

• Fix leave announcements to be pushed to the stream if pressing Tab after focusing the stream with a device different from the keyboard.

Release notes

• Notivue Core - Fixed #18
• Built-in Notifications - Removed opacity 0.95 from .Notivue__content-message. Set --nv-promise-bg to#FFF to materialTheme and pastelTheme.

This release brings various bug fixes introduced in the yesterday's minor release (1.2.0) and a refactor of the configuration types.

What's fixed

• Core - Refactored the configuration types, which were causing a Vue bug where NotivueConfig type couldn't be imported in an SFC because of a complex generic that vue-sfc-compiler couldn't process. Issue
• NotivueSwipe - Force touch-action: none on any child of the notification.
• NotivueKeyboard - Fixed useLastFocused composable, which was returning a wrong element.

What's improved

• NotivueSwipe - Functionalities are now automatically disabled if the item has its duration set to Infinity.
• NotivueKeyboard - Improved queue support.