Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications with Vue.
cd
into the notifications-app
folder and run the following:
main.js
or main.ts
file, add it like so:
NotificationCenter.vue
in the src/components
directory. This file will house the Notification Center component.
Add the NotificationCenterComponent
like so:
Using the Composition API
subscriberId
ideally should be the id
of the logged in user. When a user logs into your app, they’ll be able to see all their notifications in the notification center. For this to work successfully, the user should have been created as a subscriber on Novu.
The applicationIdentifier
is a public key used to identify your application. Obtain it from your Novu dashboard settings, and add it to your .env
file.
If there’s none, create a .env
file and add it like so:
YOUR_NOVU_APP_IDENTIFIER
with the real value from your dashboard.
src/views/HomeView.vue
and import the NotificationCenter.vue
component.
Replace the entire file with the code below:
Channel | Content Style | Custom Variables{{handlebars}} format |
---|---|---|
HTML | ✅ | |
Visual Editor | ✅ | |
SMS | Text | ✅ |
Chat | Text | ✅ |
In-App | Text | ✅ |
Push | Text | ✅ |
Select the in-app channel
Configure it as per your requirements and then save it
Onboarding In App
. It automatically creates a slug-like Identifier that will be needed in later steps to trigger a notification.
Configure it as shown in this image
Rename the workflow as shown here
Subscribers from the left sidebar shows all the subscriber
<NOVU_API_KEY>
with it.
Now check your Novu dashboard. You should see the recently created subscriber.
You can also update the subscriber info like so:
onboarding-in-app
is the workflow identifier we created earlier.
Ensure the subscriberId
value in the backend code that triggers the notification matches the subscriberId
in your NotificationCenterComponent code.