# Zoom WebSDK for Nuxt.js

**URL:** <https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182>\
**Category:** Web\
**Created:** [May 5, 2020, 10:39am UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182 "2020-05-05T10:39:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![bambasolutions19](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/bambasolutions19/32/1339_2.png) [@bambasolutions19](https://devforum.zoom.us/u/bambasolutions19)\
**Post date:** [May 5, 2020, 10:39am UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/1 "2020-05-05T10:39:58Z")

</div>

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

**Error**  
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

**Screenshots**

 ![Screen Shot 2020-05-05 at 1.35.02 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/e/ed57da324cd5d7d2ef247bb179c649b900b5681c.png)

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

```
script: [
      {
        src:
          'https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver',
        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) {
        console.log('checkSystemRequirements');
        console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
        ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.7.6/lib', '/av');
        Vue.prototype.$zoom = ZoomMtg;
        // console.log('Zoom INIT');
      }
    };

    Vue.use(zoomPlugin);

```

My ZoomVideo component conneciton code:

```
    this.$zoom.preLoadWasm();
    this.$zoom.prepareJssdk();

    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){
        console.log(res.result);
      }
    });

    console.log(meetConfig)
    zoom.init({
      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)
          }
        }
        console.log(joinConfig)
        zoom.join(joinConfig)
      },
      error: function(res) {
        console.log(res);
      }
    })
```

---

<div class="post-metadata">

**Author:** ![Tokyo123](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tokyo123/32/7702_2.png) [@Tokyo123](https://devforum.zoom.us/u/Tokyo123)\
**Post date:** [May 5, 2020, 5:47pm UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/2 "2020-05-05T17:47:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bambasolutions19](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/bambasolutions19/32/1339_2.png) [@bambasolutions19](https://devforum.zoom.us/u/bambasolutions19)\
**Post date:** [May 5, 2020, 6:04pm UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/3 "2020-05-05T18:04:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 11, 2020, 6:05pm UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/4 "2020-05-11T18:05:44Z")

</div>

Happy to hear you figured out the issue @bambasolutions19! 🙂

Thanks for sharing the solution!

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

-Tommy

---

<div class="post-metadata">

**Author:** ![dramoslance](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dramoslance/32/12871_2.png) [@dramoslance](https://devforum.zoom.us/u/dramoslance)\
**Post date:** [August 1, 2020, 4:07am UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/5 "2020-08-01T04:07:36Z")

</div>

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

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 3, 2020, 7:36pm UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/6 "2020-08-03T19:36:01Z")

</div>

Hey @dramoslance,

Are you experiencing the same issue?

Thanks  
-Tommy

---

<div class="post-metadata">

**Author:** ![dramoslance](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dramoslance/32/12871_2.png) [@dramoslance](https://devforum.zoom.us/u/dramoslance)\
**Post date:** [August 4, 2020, 4:21am UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/7 "2020-08-04T04:21:05Z")

</div>

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/](http://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!

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 4, 2020, 6:41pm UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/8 "2020-08-04T18:41:56Z")

</div>

Thanks for sharing your solution @dramoslance! 🙂

-Tommy

---

<div class="post-metadata">

**Author:** ![zhaowentao](https://avatars.discourse-cdn.com/v4/letter/z/dfb087/32.png) [@zhaowentao](https://devforum.zoom.us/u/zhaowentao)\
**Post date:** [August 12, 2020, 6:25am UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/9 "2020-08-12T06:25:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 12, 2020, 5:14pm UTC](https://devforum.zoom.us/t/zoom-websdk-for-nuxt-js/16182/10 "2020-08-12T17:14:56Z")

</div>

Hey @zhaowentao,

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

Thanks,  
Tommy