v2.2.0

Release notes

What's new

Disable Teleport

It is now possible to disable the built-in Teleport feature by passing false to the teleportTo config option:

const notivue = createNotivue({
  teleportTo: false
})

Stream elements custom styles

<Notivue /> renders three elements with the following structure:

List container — ol
└── List items — li[]
    └── Item container - div
        └── Notification - slot

In order to orchestrate the stream according to your config, Notivue computes and adds some inline styles to the ol, li and div elements. No classes nor other magic is involved, just those styles.

Since this release, it is now possible to define your own styles that take precedence over the default ones by passing a styles object to the omonimous <Notivue /> prop:

<Notivue
  :styles="{
    list: {
      position: 'relative'
      height: '100%'
    },
    listItem: {},
    itemContainer: {}
  }"
  v-slot="item"
>
  <Notifications :item="item" />
</Notivue>

Both new features give you total control over the positioning, allowing, for example to render the stream relatevely to a specific container with a position other than fixed.

What's improved

Refactor timeouts handling

The way Notivue handles pause and resume timeouts has been rewritten from scratch. The 60% of the involved code has been removed resulting in a much cleaner and clearer codebase.

The timeouts clearing logic has also been refactored. Compared to the previous releases, when a notification is about to be cleared, all the timeouts related to it are now cleared before triggering the leave animation and destroying the notification.