v1.3.0

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'
  },
})