Vues.md

Vues

Mini socket plugin for Vue

./src/Vues.vue

/**
 * Vues
 * (c) 2019 Vyacheslav Tomasevich
 *
 * @license MIT
 */

// imports
import io from "socket.io-client";

/**
 * Class Vues
 */
export default class Vues {
  /**
   * Method installing plugin
   * add $socket to global scope
   *
   * @param Vue
   * @static
   */
  static install(Vue) {
    Vue.prototype.$socket = io
  }
}

./src/App.js

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  props: {
    message: String
  },
  created() {
    let io = this.$socket("http://localhost:3000/");
    io.on("server", count => {
      console.log(io.id, count);
      io.emit("client", this.count++);
    });
  }
};
</script>

./src/main.js

import Vue from "vue";

import App from "./App.vue";
import Vues from "./Vues";

Vue.use(Vues);

new Vue({
  render: h => h(App)
}).$mount("#app");