vue-echo
Vue 2 integration for the Laravel Echo library.
This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for a simple channel subscription on each instance, or using Laravel Echo through this.$echo
.
Install
npm install vue-echo --save
Usage
Initialize
First you'll need to register the plugin and, optionally, initialize the Echo instance.
;Vue;/*** Alternatively you can pass an echo instance:* ********************************************* import Echo from 'laravel-echo';** const EchoInstance = new Echo({* broadcaster: 'pusher',* key: 'PUSHER KEY'* });* Vue.use(VueEcho, EchoInstance);*/
Using Echo
Once vue-echo is registered, every vue instance is able to subscribe to channels and listen to events through the this.$echo
property on the connection you specified earlier.
var vm = { // Listen for the 'NewBlogPost' event in the 'team.1' private channel this$echo; };
Subscribe your Vue instance to a single channel
You can subscribe a vue instance to a single standard channel if needed and define your events.
var vm = channel: 'blog' echo: { console; } { console; } ;
Since the scope of this
would be the same as the scope where you declare your Vue instance a second parameter is added to these locally registered events. This parameter is a direct reference to your Vue instance, you can make any changes you need through there.
Subscribing to channels
Laravel Echo allows you to subscribe to: normal, private and presence channels.
In the example above, we subscribed to a standard channel.
Private channel
If you would like to subscribe to a private channel instead, prefix your channel name with private:
var vm = channel: 'private:team.1' echo: { console; } { console; } ;
Presence channel
If you would like to subscribe to presence channel instead, prefix your channel name with presence:
var vm = channel: 'presence:team.1.chat' echo: { console; } ;
Manually listening to events
If there's a scenario where you want to listen to events after certain conditions are met, you can do so through this.channel
:
var vm = channel: 'private:team.1' echo: { console; } { console; } { ifwindowuserrole == 'admin' thischannel; };