CODEWITHSUNDEEP
javascriptvue.jsvuejs2jitsi
svoruganti
svoruganti

Reputation: 672

How to add Jitsi Meet to Vuejs

I have loaded the jitsi meet script in the body of my public.html, and i have a component as follows:

<template>
  <div class="container">
    <div id="meet"></div>
  </div>
</template>

<script>
export default {
  name: "ServiceMeet",
  mounted() {
    const domain = "meet.jit.si";
    const options = {
      roomName: "PickAnAppropriateMeetingNameHere",
      width: 700,
      height: 700,
      parentNode: document.querySelector("#meet"),
    };
    const api = new JitsiMeetExternalAPI(domain, options);
    console.log(api.getVideoQuality());
  },
};
</script>

When I try to run I get an error saying 18:21 error 'JitsiMeetExternalAPI' is not defined no-undef, however in the background i can see that the meet is working fine, so I do I fix the error or dismiss it.

Upvotes: 4

Views: 1055

Answers (2)

cdrini
cdrini

Reputation: 1096

It should work if you prefix the global with window:

const api = new window.JitsiMeetExternalAPI(domain, options);

Upvotes: 1

Yom T.
Yom T.

Reputation: 9180

You could disable the linting error, but I would recommend specifying it as a global variable instead.

.eslintrc.js

module.exports = {
  globals: {
    JitsiMeetExternalAPI: true
  }
}

Upvotes: 2

Related Questions