Update README.md (#327)

Add type declarations for optional options as it throws error.

README.md

@@ -12,13 +12,17 @@
   <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
   <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
 </p>
-
+<p align="center">
-<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
+<a href="https://www.patreon.com/MetinSeylan">
+	<img alt="Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="50" />
+</a>
+</p>
+<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements.<p>
 
 ###### Demo
 - <a href="http://metinseylan.com/vuesocketio/" target="_blank">Chat Application</a>
 - <a href="http://metinseylan.com" target="_blank">Car Tracking Application</a>
-
+<p>You can also check my other npm library <a href="https://github.com/MetinSeylan/Nestjs-OpenTelemetry">Nestjs OpenTelemetry</a></p>
 <p>
 are you looking for old documentation? <a href="https://github.com/MetinSeylan/Vue-Socket.io/blob/master/docs/OLD_README.md">it's here</a>
 </p>
@@ -90,7 +94,7 @@ vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex
 
 #### 🌈 Component Level Usage
 
-<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component, and every function will start to listen events, depends on object key</p>
+<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component. After that every function will start to listen events, depends on object key</p>
 
 ``` javascript
 new Vue({
@@ -123,6 +127,35 @@ this.sockets.subscribe('EVENT_NAME', (data) => {
 this.sockets.unsubscribe('EVENT_NAME');
 ```
 
+##### Defining handlers for events with special characters
+
+<p>If you want to handle 'kebab-case', or "event with space inside it" events, then you have to define it via the following way</p>
+
+``` javascript
+export default {
+  name: 'Test',
+  sockets: {
+    connect: function () {
+      console.log('socket to notification channel connected')
+    },
+  },
+
+  data () {
+    return {
+      something: [
+         // ... something here for the data if you need.
+      ]
+    }
+  },
+
+  mounted () {
+    this.$socket.subscribe("kebab-case", function(data) {
+        console.log("This event was fired by eg. sio.emit('kebab-case')", data)
+    })
+  }
+}
+```
+
 #### 🏆 Vuex Integration
 <p>When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`</p>
 

index.d.ts

@@ -50,6 +50,10 @@ export interface VueSocketOptions {
         options?: {
             useConnectionNamespace?: boolean
         }
+    },
+        // type declarations for optional options
+    options?:{
+        path?: string;
     }
 }
 

src/index.js

@@ -28,8 +28,16 @@ export default class VueSocketIO {
      */
     install(Vue){
 
-        Vue.prototype.$socket = this.io;
+        const version = Number(Vue.version.split('.')[0])
-        Vue.prototype.$vueSocketIo = this;
+
+        if (version >= 3) {
+            Vue.config.globalProperties.$socket = this.io;
+            Vue.config.globalProperties.$vueSocketIo = this;
+        } else {
+            Vue.prototype.$socket = this.io;
+            Vue.prototype.$vueSocketIo = this;
+        }
+
         Vue.mixin(Mixin);
 
         Logger.info('Vue-Socket.io plugin enabled');