cft
Become a CreatorSign inGet Started

Realtime Notification using Vue pusher in Nuxtjs | ewumesh

Real-time notification using vue-pusher package in nuxtjs. #nuxtjs #javascript #notification #pusher #pusherjs #development #ewumesh


user

Umesh Thapa

3 months ago | 1 min read
Follow

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


user
Created by

Umesh Thapa

Follow

Frontend Engineer at Heaven Maker Group

Developer | Creator | Writer


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles