Usage in composable

[mfrascati]

Hi thanks, for the module! Quick question: the module works fine in components, using this.$notify, but I'm trying to use it in a composable, in this way:

const notification = useNotification();
notification.notify({ type: "error", text: "test" });

but it doesn't show any notification, no error. Am I doing something wrong?

[windx-foobar]

@mfrascati Hi. I'm glad it was helpful to you

It's a bug @kyvg/vue3-notification, i think... After work HMR notification is work fine)

You tried?

[windx-foobar]

@mfrascati I will try to deal with this problem. thank you very much for issue!

[daviddomkar]

Hi. Please reopen this, the notification is still not working.

[windx-foobar]

Hi. Please reopen this, the notification is still not working.

Hi. Can u reproduce that case on stackblitz ? Thank you.

[windx-foobar]

You can check source code in docs. It is used there Composition API and working correctly... link

[BramEsposito]

I'm unable to get this to work as well.

Here is a Stackblitz project: https://stackblitz.com/edit/nuxt-starter-tjg71j

I had to disable ssr as well, because that generated a lot of hydration mismatch errors.

---

UPDATE with solution:

put your <NuxtNotifications /> component in the root of your app.vue and right before the closing </template> tag

[windx-foobar]

I'm unable to get this to work as well.

Here is a Stackblitz project: https://stackblitz.com/edit/nuxt-starter-tjg71j

I had to disable ssr as well, because that generated a lot of hydration mismatch errors.

UPDATE with solution:

put your <NuxtNotifications /> component in the root of your app.vue and right before the closing </template> tag

Hi. Thank you for detailed reproduce. I see that this doesn't work and I'll try to figure it out.

[windx-foobar]

Need reproduction it with newest version v1.2.1

[BramEsposito]

I'm still running into this issue.

I solved it for myself by falling back by using this reference to notify:

const app = useNuxtApp();

const notify = app.vueApp.config.globalProperties.$notify;

This seems to be an issue in the higher technology, maybe in nuxt or vite itself because:

• the issue is only there when running in dev mode with npm run dev, so after building, everything works fine
• the root of the issue is that vue3-notification seems to be embedded twice (?) once as a cached version and once as a direct inclusion from node_modules:

  http://localhost:3000/_nuxt/node_modules/@kyvg/vue3-notification/dist/index.es.js?v=5eecae26

  vs

  http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/@kyvg_vue3-notification.js?v=3fce2b65

  This results in the onMounted hook not being fired for the cached version hence the event listeners not being registered and thus no notification being displayed.

It is the only file being loaded from the .cache directory though

This workaround works for me at the moment, so I'm leaving this be for now. It would be great if anybody wants to look further into this, though.

[BramEsposito]

Extra option to fix this: switch ssr to true in you nuxt.config.ts

[windx-foobar]

@BramEsposito Hi! Can u try clean .nuxt and node_modules/.cache and run dev build again?

[windx-foobar]

Hi everybody! Put your hands up 😻 Can anyone check that this problem is resolved in the new version? v1.2.2 @BramEsposito @daviddomkar

Playground

Thank you very much!

[windx-foobar]

Close because inactive

[BramEsposito]

Sorry, I couldn't make time before today.

I have reproduced the resolution and can confirm this works now with these versions:

• nuxt: 3.12.2
• nuxt3-notifications: 1.2.2

as you can see here: https://stackblitz.com/edit/nuxt-starter-tjg71j

thanks for your awesome job!

[windx-foobar]

Sorry, I couldn't make time before today.

I have reproduced the resolution and can confirm this works now with these versions:

• nuxt: 3.12.2
• nuxt3-notifications: 1.2.2

as you can see here: https://stackblitz.com/edit/nuxt-starter-tjg71j

thanks for your awesome job!

Hi! Thanks for reproduce! And big thanks for idea use this code

const app = useNuxtApp();

const notify = app.vueApp.config.globalProperties.$notify;