VueJS 3 Compatibility issue about vue-jitsi-meet

[ndrshn]

hi @danionescu2007 ,

I've had same issue. Then, I wrote simple component (like this one) that can be used in Vue 3.

code:

<template>
  <div ref="jitsiContainer" style="height: 100%; width: 100%"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { nanoid } from "nanoid";

const props = defineProps({
  options: {
    type: Object,
    default: {
      roomName: nanoid(6),
      userInfo: {
        email: "[email protected]",
        displayName: "John Doe",
      },
    },
  },
  domain: {
    type: String,
    default: "meet.jit.si"
  }
});
const jitsiApi = ref();
const jitsiContainer = ref();

const loadScript = (src, cb) => {
  const scriptEl = document.createElement("script");
  scriptEl.src = src;
  scriptEl.async = 1;
  document.querySelector("head").appendChild(scriptEl);
  scriptEl.addEventListener("load", cb);
};

const embedJitsiWidget = () => {
  const options = {
    ...props.options,
    parentNode: jitsiContainer.value,
  };
  jitsiApi.value = new window.JitsiMeetExternalAPI(props.domain, options);
};

const executeCommand = (command, ...value) => {
  jitsiApi.value.executeCommand(command, ...value);
};

const addEventListener = (event, fn) => {
  jitsiApi.value.on(event, fn);
};

const removeJitsiWidget = () => {
  if (jitsiApi.value) jitsiApi.value.dispose();
};

onMounted(() => {
  loadScript("https://meeting.example.com/external_api.js", () => {
    if (!window.JitsiMeetExternalAPI) throw new Error("Jitsi Meet API not loaded");
    embedJitsiWidget();
  });
});
</script>

[danionescu2007]

I managed to adapt this one already with the Vue 3 requirements.