Realtime Notification using Vue pusher in Nuxtjs | ewumesh
Real-time notification using vue-pusher package in nuxtjs. #nuxtjs #javascript #notification #pusher #pusherjs #development #ewumesh
Umesh Thapa
I want real-time notification on my web application, I tried different packages and finally worked by using Vue pusher. So, I am trying to explain a little bit about the implementation of vue-pusher in nuxt js.
Firstly,
npm i vue-pusher
And then, create a plugin pusher.js
import Vue from 'vue';
import * as Cookies from 'js-cookie'
const token = Cookies.get('');
Vue.use(require('vue-pusher'), {
api_key: '9a104d47d5d64f496aaacccass',
options: {
cluster: 'ap2',
forceTLS: true,
encrypted: true,
authEndpoint: process.env.BASE_URL+'/broadcasting/auth',
auth: {
headers: {
'Authorization': `Bearer ${token}`,
}
},
}
});
Add the created plugin into nuxt.config.js
plugins: [
{src: '~/plugins/pusher', ssr: false},
],
And Finally, use vue pusher in any components like below.
getProductStatusNotification() {
var channel = this.$pusher.subscribe(
"private-product.status.changed"
);
channel.bind("product-status-changed", (log) => {
let notifications = log;
});
},
For private channels, use add private- before channel name, for public channels normally use channel name only. And then use channel.bind using event channel name and channel events are provided by backend.
Check out pusher official docs here.
And, also check vue-pusher package.
Upvote
Umesh Thapa
Developer | Creator | Writer
Related Articles