A Phoenix integration for Vuejs support either vue-class-component

Vue-Phoenix

Vue-Phoenix is a Phoenix integration for Vuejs. It can support either vue-class-component or JS single file component.

Description

It provides the bridge to consume phoenix

License

MIT License

Install

npm i -S @vip30/vue-phoenix

Usage

// In main.ts / main.js
import VuePhoenix from '@vip30/vue-phoenix'
Vue.use(
  new VuePhoenix('<path>', {
    token: '<secret-token>'
  })
)

// In ts component
import { Obey } from '@vip30/vue-phoenix'

@Obey('shout', 'room:lobby')
public shout(payload: any) {
    console.log(payload)
}

// In js component
new Vue({
  phoenix: {
    'room:lobby': {
      shout: function(payload) {
        console.log(payload)
      }
    }
  }
})

In case, the channel name can be a non-static string. You can set your own channel on your code.

Example:

// In ts component
import { Obey } from '@vip30/vue-phoenix'

// Without the room name, it will use the component channel
@Obey('shout')
public shout(payload: any) {
  console.log(payload)
}

public mounted() {
  this.$initChannel('room-lobby')
}

// In js component
new Vue({
  phoenix: {
    shout: function(payload) {
      console.log(payload)
    }
  },
  mounted: function() {
    this.$initChannel('room-lobby')
  }
})

Also you can use this.$channelKeeper.retrieveChannel to create your own channel

Example:

public mounted() {
  const channel = this.$channelKeeper.retrieveChannel('room:xxx')
}

You can view example at here