implementation for vuejs
Switch branches/tags
Clone or download
MetinSeylan Merge pull request #118 from stalniy/fix/actions
fix(actions): properly transform action to store action
Latest commit 9e6a586 Apr 4, 2018
Failed to load latest commit information.
dist 2.1.1-b build Jan 15, 2018
src Merge branch 'master' into fix/actions Apr 4, 2018
.gitignore 2.1.1-b build Jan 15, 2018 Add support for namespaced Vuex actions Mar 20, 2017
package.json 2.1.1-b build Jan 15, 2018
webpack.config.js 2.1.0 Dec 30, 2016

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, '');

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