Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/happydemon/vue-echo
Vue integration for the Laravel Echo library.
https://github.com/happydemon/vue-echo
laravel-echo pusher socket-io vue vue-echo vue2 vuejs
Last synced: 4 days ago
JSON representation
Vue integration for the Laravel Echo library.
- Host: GitHub
- URL: https://github.com/happydemon/vue-echo
- Owner: happyDemon
- Created: 2016-10-30T11:03:24.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-27T17:34:15.000Z (almost 6 years ago)
- Last Synced: 2024-04-29T19:21:32.837Z (8 months ago)
- Topics: laravel-echo, pusher, socket-io, vue, vue-echo, vue2, vuejs
- Language: JavaScript
- Size: 150 KB
- Stars: 228
- Watchers: 8
- Forks: 24
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
``` bash
npm install vue-echo --save
```
## Usage
### Initialize
First you'll need to register the plugin and, optionally, initialize the Echo instance.
``` js
import VueEcho from 'vue-echo';
Vue.use(VueEcho, {
broadcaster: 'pusher',
key: 'PUSHER KEY'
});
/**
* 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.
```js
var vm = new Vue({
mounted() {
// Listen for the 'NewBlogPost' event in the 'team.1' private channel
this.$echo.private('team.1').listen('NewBlogPost', (payload) => {
console.log(payload);
});
}
});
```
### 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.
```js
var vm = new Vue({
channel: 'blog',
echo: {
'BlogPostCreated': (payload, vm) => {
console.log('blog post created', payload);
},
'BlogPostDeleted': (payload, vm) => {
console.log('blog post deleted', payload);
}
}
});
```
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:`
```js
var vm = new Vue({
channel: 'private:team.1',
echo: {
'BlogPostCreated': (payload, vm) => {
console.log('blog post created', payload);
},
'BlogPostDeleted': (payload, vm) => {
console.log('blog post deleted', payload);
}
}
});
```
##### Presence channel
If you would like to subscribe to presence channel instead, prefix your channel name with `presence:`
```js
var vm = new Vue({
channel: 'presence:team.1.chat',
echo: {
'NewMessage': (payload, vm) => {
console.log('new message from team', payload);
}
}
});
```
### 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`:
```js
var vm = new Vue({
channel: 'private:team.1',
echo: {
'BlogPostCreated': (payload, vm) => {
console.log('blog post created', payload);
},
'BlogPostDeleted': (payload, vm) => {
console.log('blog post deleted', payload);
}
},
mounted(){
if(window.user.role == 'admin'){
this.channel.listen('BlogPostEdited', (payload) => {
console.log('As admin I get notified of edits', payload);
});
}
}
});
```