Vue socket implemantation for vuejs and vuex

Version: 2.1.1 Updated: 10/16/2017

By: MetinSeylan License: MIT

Downloads Last 30 Days: 20

NPM version VueJS v2 compatible Downloads Dependency Badge License implementation for Vuejs 2 and Vuex


npm install --save



Automatic socket connection from an URL string

import VueSocketio from '';
Vue.use(VueSocketio, '');

or with namespace

import VueSocketio from '';
Vue.use(VueSocketio, '');

or with urlPath

import VueSocketio from '';
Vue.use(VueSocketio, { url: '', path: '/your_path' });

or with both namespace & urlPath

import VueSocketio from '';
Vue.use(VueSocketio, { url: '', path: '/your_path' });

Bind custom instance

Vue.use(VueSocketio, socketio(''));

Enable Vuex integration

import store from './yourstore'
Vue.use(VueSocketio, socketio(''), store);

On Vuejs instance usage

var vm = new Vue({
    connect: function(){
      console.log('socket connected')
    customEmit: function(val){
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
  methods: {
    clickButton: function(val){
        // $socket is instance
        this.$socket.emit('emit_method', val);

Dynamic socket event listeners

Create a new listener

this.$options.sockets.event_name = (data) => {

Remove existing listener

delete this.$options.sockets.event_name;

Vuex Store integration

Socket mutations always have SOCKET_ prefix.

Socket actions always have socket_ prefix and the socket event name is camelCased (ex. SOCKET_USER_MESSAGE => socket_userMessage)

You can use either one or another or both in your store. Namespaced modules are supported.

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


export default new Vuex.Store({
    state: {
        connect: false,
        message: null
        SOCKET_CONNECT: (state,  status ) => {
            state.connect = true;
        SOCKET_USER_MESSAGE: (state,  message) => {
            state.message = message;
    actions: {
        otherAction: (context, type) => {
            return true;
        socket_userMessage: (context, message) => {
            context.dispatch('newMessage', message);
            context.commit('NEW_MESSAGE_RECEIVED', message);
            if (message.is_important) {
                context.dispatch('alertImportantMessage', message);


Realtime Car Tracker System

Simple Chat App

Categories: Vue js