SocketCluster with vuejs (vue-cli)

[mnce92]

Is it possible to use socketcluster together vuejs(vue-cli) app? How should I do it?Anyone can provide an example?

[happilymarrieddad]

Are you planning on using socketcluster as an API for the vue-cli? Yes, I've done it.

[mnce92]

@happilymarrieddad you mean https://github.com/happilymarrieddad/vue-socketcluster ?

[ayZagen]

If you know javascript (you have to know if developing vue app) you could use socketcluster-client.

[maarteNNNN]

@ayZagen you can make a global plugin in Vue

import sc from 'socketcluster-client'

const SCPlugin = {
  install(Vue, options) {
    Vue.prototype.$sc = sc.create(options)
    Vue.mixin({
      mounted() {
        this.$sc.on('connect', () => {
          console.log('connected')
        })
        this.$sc.on('disconnect', () => {
          console.log('disconnected')
        })
        this.$sc.on('error', (err) => {
          console.log(err)
        })
      }
    })
  }
}

export default SCPlugin

Import it in your main.js and install it:

Vue.use(SCPlugin, {<SocketClusterOptions>})

<SocketClusterOptions> using the config the same as using socketcluster-client without vue

[ayZagen]

@maarteNNNN Thanks for your example but I am not the one in need :) As for the example, there is no need to use it as vue plugin, es6 modules could be used. Also you need to be careful of using global mixin as it will affect every vue instance and components. You should choose the way which suits best to your design.

[maarteNNNN]

@ayZagen This is the short version of my plugin. The plugin does not get mounted multiple times. It comes in really handy to just use this.$sc and I baked auth in to it. This was an example to get you started.

[ayZagen]

@maarteNNNN It's OK to wrap socketcluster instance as vue plugin but my point was to be careful of using global mixin, as it may not be intended for some cases. Additional information could be found on Vue - Global Mixin