Vue.js 2 Design Patterns and Best Practices

Setting up Vue and Socket.io

Let's head on over to our main.js file so we can register Socket.io and the Vue-Socket.io plugin. You may remember how to do this from previous chapters:

import Vue from 'vue';import App from './App.vue';import SocketIo from 'socket.io-client';import VueSocketIo from 'vue-socket.io';export const Socket = SocketIo(`http://localhost:3000`);Vue.use(VueSocketIo, Socket);new Vue({  el: '#app',  render: h => h(App),});

In the preceding code block, we're importing the necessary dependencies and creating a reference to our Socket.io server, which is currently running on port 3000. We're then adding the Vue plugin by using Vue.use.

If we've done everything correctly, our client and server should be talking to each other. ...