Integrating Vue.js and

Joshua Bemenderfer

Websockets are a powerful way to enable bidirectional communication between the client and the server, and is one of the leading libraries that simplifies connection handling with websockets and alternative transports. Letโ€™s combine it with Vue in order to be able to use directly in our components!


First letโ€™s install and using Yarn or NPM.

# Yarn
$ yarn add
$ npm install --save


For the purposes of this guide, weโ€™re going to assume you already have a server running with locally on, letโ€™s say, port 4113.

First, enable the plugin in your app startup file:


import Vue from 'vue';
import socketio from '';
import VueSocketIO from '';

export const SocketInstance = socketio('http://localhost:4113');

Vue.use(VueSocketIO, SocketInstance)

// The usual app stuff goes here.

Now, we can bind to socket events directly in our components:


    <p v-if="isConnected">We're connected to the server!</p>
    <p>Message from server: "{{socketMessage}}"</p>
    <button @click="pingServer()">Ping Server</button>

export default {
  data() {
    return {
      isConnected: false,
      socketMessage: ''

  sockets: {
    connect() {
      // Fired when the socket connects.
      this.isConnected = true;

    disconnect() {
      this.isConnected = false;

    // Fired when the server sends something on the "messageChannel" channel.
    messageChannel(data) {
      this.socketMessage = data

  methods: {
    pingServer() {
      // Send the "pingServer" event to the server.
      this.$socket.emit('pingServer', 'PING!')

Vuex integration

If youโ€™re using Vuex, you can have store mutations fired when socket channels receive messages, just by adding your Vuex store to the plugin initialization in main.js.


import { MyVuexStore } from './my-vuex-store.js'

Vue.use(VueSocketIO, SocketInstance, MyVuexStore)

All mutations triggered by sockets are prefixed by SOCKET_

So, for example, if your channel is called messageChannel, the corresponding Vuex mutation would be SOCKET_MESSAGECHANNEL. In your store configuration, that would look like this:


import Vue from 'vue';
import Vuex from 'vuex';


export default new Vuex.Store({
  state: {
    isConnected: false,
    socketMessage: ''

    SOCKET_CONNECT(state) {
      state.isConnected = true;

      state.isConnected = false;

    SOCKET_MESSAGECHANNEL(state, message) {
      state.socketMessage = message

Not bad eh?

For more detailed information, take a look at the and documentation.

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#