How to add Jitsi Meet to Vuejs

Question

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.

UPDATE: Don't suggest any linter ignores as I've already done this but still get an undefined error. — svoruganti, Dec 15 '20 at 22:47

score 2 · Answer 1 · answered Nov 19 '20 at 16:42

2

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

.eslintrc.js

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

answered Nov 19 '20 at 16:42

Yom T.

8,760
2
32
49

This doesn't work as it cant parse any of the .vue files. – svoruganti Dec 15 '20 at 22:41
1

@svoruganti What do you mean by that? ESLint *does* parse `.vue` files. I verified this answer works in my sandbox (a new project generated from Vue CLI). – tony19 Dec 16 '20 at 00:08

score 1 · Answer 2 · answered Dec 15 '20 at 23:24

1

It should work if you prefix the global with window:

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

answered Dec 15 '20 at 23:24

cdrini

989
10
17

How to add Jitsi Meet to Vuejs

2 Answers2

Linked