Feathers socketio client implementation into vuejs/vuex

actions.js

import * as services from './sockets'

export const fetchSites = ({ dispatch, state }) => {
	services.siteService.find({}).then(sites => {
		dispatch(types.MARKET_SITES, sites.data)
	})
}

app.js

//Server side

'use strict';

import 'babel-polyfill'
const path = require('path');
const serveStatic = require('feathers').static;
const favicon = require('serve-favicon');
const compress = require('compression');
const cors = require('cors');
const feathers = require('feathers');
const configuration = require('feathers-configuration');
const hooks = require('feathers-hooks');
const rest = require('feathers-rest');
const bodyParser = require('body-parser');
const socketio = require('feathers-socketio');
const middleware = require('./middleware');
const services = require('./services');

const app = feathers();

app.configure(configuration(path.join(__dirname, '..')));

app.use(compress())
  .options('*', cors())
  .use(cors())
  .use(favicon( path.join(app.get('public'), 'favicon.ico') ))
  .use('/', serveStatic( app.get('public') ))
  .use(bodyParser.json())
  .use(bodyParser.urlencoded({ extended: true }))
  .configure(hooks())
  .configure(rest())
  .configure(socketio())
  .configure(services)
  .configure(middleware);

module.exports = app;

env.js

'use strict'

module.exports = {
	socket: {
		url: 'https://feathers-upguard.c9users.io'
	}
}

Home.vue

<template>
	<div id="marketplace">
		<ul v-for="site in sites">
			<li>Site name: {{ site.name }}</li>
			<li>Description: {{ site.description }}</li>
			<li>Category: {{ site.category }}</li>
			<li><img :src="site.screenshot" width="150px"></li>
			<li>Monthly Uniques: {{ site.estimated_monthly_visitors }}</li>
		</ul>
	</div>
</template>

<script>
import { fetchSites } from '../../vuex/actions'
import UiButton from 'keen-ui/lib/UiButton'

export default {
	data () {
		return {
			//
		}
	},

	ready () {
		this.fetchSites()
	},

	vuex: {
		actions: {
			fetchSites
		},
		getters: {
			error: state => state.error,
			user: state => state.user,
			sites: state => state.sites
		}
	},

	components: {
		UiButton
	}
}
</script>

index.js

// located in sockets/index.js
const feathers = require('feathers/client')
const socketio = require('feathers-socketio/client')
const io = require('socket.io-client')
import config from '../config/env'

const socket = io(config.socket.url)

export const app = feathers().configure(socketio(socket))
export const siteService = app.service('sites')