vue-dyte

A vue component for Dyte client

📖 Release Notes

⚠️ v2.x.x is for Vue 2. Vue 3 is supported with v3.x.x

For Vue 3

Install

npm i -S vue-dyte

yarn add vue-dyte

Use

<vue-dyte-client
  :client-id="clientId"
  :meeting-config="meetingConfig"
  :ui-config="uiConfig"
  @init="onInit"
  @error="onError"
  @connect="onConnect"
  @disconnect="onDisconnect"
/>

// typescript example
import { defineComponent } from "vue";
import { Meeting, VueDyteClient } from "vue-dyte";

export default defineComponent({
  components: {
    VueDyteClient,
  },
  data() {
    return {
      clientId: '<your Dyte organization id>',
      meetingConfig: {
        roomName: '<room name>',
        authToken: '<the participant authToken>',
        // for more options, see here: https://docs.dyte.io/javascript/reference/meeting
      },
      uiConfig: {
        header: true,
        // for more UI options, see here: https://docs.dyte.io/javascript/reference/dyte-ui-config/ 
      }
    }
  }
  methods: {
    onInit(meeting: Meeting) {
      console.log("onInit", meeting);
    },
    onError(e: any) {
      console.error(e);
    },
    onConnect() {
      console.log("connected");
    },
    onDisconnect() {
      console.log("disconnected");
    },
  },
});

For Vue 2

Install

npm i -S vue-dyte@2.0.3

yarn add vue-dyte@2.0.3

Use

<vue-dyte-client
  :client-id="clientId"
  :meeting-config="meetingConfig"
  :ui-config="uiConfig"
  @init="onInit"
  @error="onError"
  @connect="onConnect"
  @disconnect="onDisconnect"
/>

import { VueDyteClient } from "vue-dyte";

export default {
  components: {
    VueDyteClient,
  },
  data() {
    return {
      clientId: '<your Dyte organization id>',
      meetingConfig: {
        roomName: '<room name>',
        authToken: '<the participant authToken>',
        // for more options, see here: https://docs.dyte.io/javascript/reference/meeting
      },
      uiConfig: {
        header: true,
        // for more UI options, see here: https://docs.dyte.io/javascript/reference/dyte-ui-config/ 
      }
    }
  }
  methods: {
    onInit(meeting) {
      console.log("onInit", meeting);
    },
    onError(e) {
      console.error(e);
    },
    onConnect() {
      console.log("connected");
    },
    onDisconnect() {
      console.log("disconnected");
    },
}

Events

All Meeting events are supported: connect, meetingJoined , localMediaConnected, disconnect, meetingEnded, participantJoin, participantLeave, chatMessage, roomMessage, message, activeSpeaker, recordingStarted, recordingStopped

See here for reference