Improvements on Notification Center (VUE)
Hey everyone,
I had a problem implementing an event listener.
The docs suggest using @notificationClicked, because vue has event binding shortcut which internally results in an event listener with the following name: onNotificationClick.
This results in, that it wont work:
the correct syntax is therefore a variable(function) binding: :notification-clicked="onNotificationClicked"
Feel free to add this to the docs, to keep new users from trying out, until it works 🙂
6 Replies
Hi @SHG-TV, I'm an AI assistant for Novu. While a team member reviews this question, I'll look through relevant sources and see if I can provide suggestions. Please tag @Ask Inkeep with any follow-up questions.
-----------------------------
While I generate an answer, here are some sources that might be helpful:
* Web Component
* How To Integrate Segment With Novu
* Variants
* Content Creation
-----------------------------
Answer
Thank you for sharing your experience with implementing an event listener in Vue with Novu. Your clarification regarding the syntax for binding the
onNotificationClick event as :notification-clicked="onNotificationClicked" can indeed help prevent confusion for new users integrating Novu into Vue applications.
Your feedback about adding this to the documentation is valuable. For further documentation updates or feature requests, consider filing an issue or contributing directly to the Novu GitHub repository (1) .
Currently, the official Novu documentation provides information on properties and events for the Notification Center Web Component, including onNotificationClick and its Vue-friendly alias notificationClicked (2) . However, it does not explicitly cover the specific Vue syntax issue you mentioned. Your insight could enhance the documentation for Vue developers.Got it. Tagging @Support for additional help.
@SHG-TV
I just tested
notificationClicked. it is working as expected.
I would urge you to check this codesandbox or example repo on githubHi @Pawan Jain ,
I did not see the example. My Bad.
My issue was just, that vue event binding is normaly not implemented as an html attribute, which resulted in the behavior/missunderstanding above on my side.
Thank you anyways for your great support 🙂
Glad I could be helpful. Feel free to create a new thread with any new questions you may have.