initial commit

Author: Maxim Kerstens

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+npm-debug.log
+.idea/
+.DS_Store
+.idea
+yarn.lock

README.md

@@ -1,2 +1,93 @@
 # vue-echo
 Vue integration for the Laravel Echo library.
+
+## Install
+
+  ``` bash
+  npm install vue-echo --save
+  ```
+  
+## Usage
+
+### Initialise
+First you'll need to register the plugin and optionally initialise 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';
+ * 
+ * let 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 to subscribe to channels and listen to events through the `this.$echo` property on the connection you specified earlier.
+
+
+### 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 => {
+        console.log('blog post created', payload);
+      },
+      'BlogPostDeleted': payload => {
+        console.log('blog post deleted', payload);
+      }
+    }
+  })
+```
+
+#### 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 private channel instead, prefix your channel name with `private`:
+
+```js
+var vm = new Vue({
+    channel: 'private:team.1'
+    echo: {
+      'BlogPostCreated': payload => {
+        console.log('blog post created', payload);
+      },
+      'BlogPostDeleted': payload => {
+        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 => {
+        console.log('bNew message from team', payload);
+      }
+    }
+  })
+```

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vue-echo",
+  "version": "0.1.0",
+  "description": "Vue integration for the Laravel Echo library.",
+  "main": "vue-echo.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/happyDemon/vue-echo"
+  },
+  "keywords": [
+    "laravel",
+    "pusher",
+    "socket.io",
+    "vue"
+  ],
+  "author": {
+    "name": "Maxim Kerstens"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/happyDemon/vue-echo",
+  "dependencies": {
+    "laravel-echo": "^1.0.5",
+    "pusher-js": "^3.2.1"
+  }
+}

vue-echo.js

@@ -0,0 +1,59 @@
+import Echo from 'laravel-echo';
+
+export default {
+    install(Vue, options) {
+        if (!options) {
+            throw new Error("[Vue-Echo] cannot locate options");
+        }
+
+        if (typeof options !== 'object') {
+            throw new Error("[Vue-Echo] cannot initiate options");
+        }
+
+        if(typeof options == 'function')
+        {
+            Vue.prototype.$echo = options;
+        }
+        else
+        {
+
+            Vue.prototype.$echo = new Echo(options);
+        }
+
+        Vue.mixin({
+            created(){
+                let channel = this.$options['channel'];
+
+                if(channel)
+                {
+                    if(channel.startsWith('private:'))
+                    {
+                        this.channel = this.$echo.private(channel.replace('private:', ''))
+                    }
+                    else if(channel.startsWith('presence:'))
+                    {
+                        this.channel = this.$echo.join(channel.replace('presence:', ''))
+                    }
+                    else
+                    {
+                        this.channel = this.$echo.channel(channel);
+                    }
+
+                    let events = this.$options['echo'];
+
+                    if(events)
+                    {
+                        Object.keys(events).forEach(function(key){
+                            this.channel.listen(key, events[key]);
+                        }, this);
+                    }
+                }
+            },
+            beforeDestroy(){
+                if(this.channel !== false){
+                    this.channel.unsubscribe();
+                }
+            }
+        })
+    }
+}