Jitsi Meet Vue SDK
The Jitsi Meet Vue SDK provides the same user experience as the Jitsi Meet app, in a customizable way which you can embed in your Vue.js app.
Install
npm install @jitsi/vue-sdk
Modules
This library exposes two components with similar properties, intended for different use-cases.
JitsiMeeting
To be used with custom domains as-it-is in React projects:
<JitsiMeeting
:domain="YOUR_DOMAIN"
:room-name="YOUR_ROOM_NAME"
/>Properties specific to the JitsiMeeting component
domain
Optional. Field used to retrieve the external_api.js file that initializes the IFrame. If omitted, defaults to meet.jit.si.
JaaSMeeting
To be used with the 8x8.vc domain as-it-is in Vue projects:
<JaaSMeeting
:app-id="YOUR_APP_ID"
:room-name="YOUR_ROOM_NAME"
/>...or with the stage.8x8.vc domain:
<JaaSMeeting
:app-id="YOUR_APP_ID"
:room-name="YOUR_ROOM_NAME"
:use-staging="true"
/>Note: When using the props name, Vuejs automatically converts it to kebab case
Properties specific to the JaasMeeting component
appId
Required. Provides an isolated context and prefixes the room name.
useStaging
Optional. Tells whether to use the staging environment or not.
Common properties
roomName
Required. String used when joining the meeting.
lang
Optional. The default meeting language.
<JitsiMeeting
:domain="YOUR_DOMAIN"
:room-name="YOUR_ROOM_NAME"
lang="de"
/>configOverwrite
Optional. Object used for options overrides.
interfaceConfigOverwrite
Optional. Object used for more options overrides.
jwt
Optional. Token for authentication.
invitees
Optional. Participants list.
devices
Optional. Information regarding the devices used during the call.
userInfo
Optional. Details about the participant that started the meeting.
Slots
spinner
Optional. Custom loading view while the IFrame is loading.
import CustomSpinner from "yourcustomspinner";
<JitsiMeeting
:domain="YOUR_DOMAIN"
:room-name="YOUR_ROOM_NAME"
>
<template v-slot:spinner>
<CustomSpinner />
</template>
</JitsiMeeting>Events
getIFrameRefOnApiReady
Event to retrieve the parent node of the IFrame for more control (e.g. styling). Triggered when the Jitsi Iframe is ready.
<JitsiMeeting
...
@get-iframe-ref-on-api-ready="(parentNode) => { parentNode.style.height = '700px'}"
/>Typescript example
<JitsiMeeting
...
@get-iframe-ref-on-api-ready="(parentNode: HTMLDivElement) => { parentNode.style.height = '700px'}"
/>onApiReady
Callback triggered when the external API is loaded to expose it for events and commands.
<JitsiMeeting
...
@on-api-ready="(externalApi) => {console.log('Jisti is ready')
}"
/>Typescript example
<JitsiMeeting
...
@on-api-ready="(externalApi: IJitsiMeetExternalApi) => {console.log('Jisti is ready')
}"
/>onReadyToClose
Callback triggered when the meeting is ready to be closed.
<JitsiMeeting
...
@on-ready-to-close="() => { console.log('Ready to close') }"
/>Sample
Run npm build in the root folder
npm run build
Navigate to the example directory.
Install and run the project from the example directory to see the JitsiMeeting module in action.
npm install
npm run dev
Acknowledgements
This module is modeled after: https://github.com/jitsi/jitsi-meet-react-sdk