Zoom WebSDK for Nuxt.js

I am trying to implement a Zoom meeting window where the user can automatically join, using the Zoom Web SDK

I am not getting any errors in the console, but I am getting a black screen with a “0”, and it seems no content is being loaded to the zmmtg-root component

Which version?
Web SDK 1.7.6


Additional context
My nuxt.config.js file’s script section:

script: [
        body: true,
      { src: 'https://code.jquery.com/jquery-3.5.0.min.js' },

My zoom-sdk.js plugin file:

    import { ZoomMtg } from '@zoomus/websdk';
    import Vue from 'vue';

   const zoomPlugin = {
      install: function(Vue, options) {
        ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.7.6/lib', '/av');
        Vue.prototype.$zoom = ZoomMtg;
        // console.log('Zoom INIT');


My ZoomVideo component conneciton code:


    const apiKey = process.env.platform.zoom.apiKey;
    const apiSecret = process.env.platform.zoom.apiSecret;
    console.log('API KEY', apiKey, 'API SECRET', apiSecret)

    const meetConfig = {
      apiKey: apiKey,
      meetingNumber: this.meeting.number,
      userName: username,
      password: this.meeting.password, // if required
      role: 0 // 1 for host; 0 for attendee or webinar

    const zoom = this.$zoom;
    const signature = zoom.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: apiKey,
      apiSecret: apiSecret,
      role: meetConfig.role,
      success: function(res){

      leaveUrl: "https://zoom.us",
      isSupportAV: true,
      success: function() {
        console.log('INIT SUCCESS')
        const joinConfig = {
          signature: signature,
          apiKey: meetConfig.apiKey,
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          leaveUrl: "https://zoom.us",
          // password optional; set by Host
          passWord: meetConfig.password,
          success: function(res){
            console.log('join meeting success:', res);
          error(res) {
            console.log('ERROR:', res)
      error: function(res) {
1 Like

I am having similar issues as well. I receive a “Uncaught ReferenceError: $ is not defined” that is related to ZoomMtg from ‘@zoomus/websdk’ package. Not sure what to do.

I had that issue. The solution was to add jQuery as a static dependency to nuxt.config.

As for my issue - Had to turn off SSR for the video component with , and make sure to check if process.client === true before importing the @zoomus/websdk package

Happy to hear you figured out the issue @bambasolutions19! :slight_smile:

Thanks for sharing the solution!

@Tokyo123, let us know if this solution works for you.


Could you please share us how to turn off the SSR. And the component itself.

Thanks in advance!

Hey @dramoslance,

Are you experiencing the same issue?


Yes @tommy,

I experienced the same issue within my SSR project.

Fortunately I found a greate resource within the GatsbyJS site. Please let me share you the link: gatsbyjs.org/docs/using-client-side-only-packages/

I solved my issue by using a High Order Component + Loadable library

Hope this can help you guys!

1 Like

Thanks for sharing your solution @dramoslance! :slight_smile:


i have imported jQuery, but this error also appear, why?? :sob:

Hey @zhaowentao,

Can you create a new topic here: #web-sdk and fill out the post template so I have enough info to help?