Skip to main content
  1. Tutorials/

Integrating Vue.js and

Tutorials Vue.js

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!


Installation #

First let’s install and using Yarn or NPM.

# Yarn
$ yarn add
$ npm install --save

Usage #

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>

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.