# Black Screen With No Errors on Nuxt JS App

**URL:** <https://devforum.zoom.us/t/black-screen-with-no-errors-on-nuxt-js-app/47481>\
**Category:** Web\
**Created:** [April 7, 2021, 10:02pm UTC](https://devforum.zoom.us/t/black-screen-with-no-errors-on-nuxt-js-app/47481 "2021-04-07T22:02:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sdriyaz712](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sdriyaz712/32/25605_2.png) [@sdriyaz712](https://devforum.zoom.us/u/sdriyaz712)\
**Post date:** [April 7, 2021, 10:02pm UTC](https://devforum.zoom.us/t/black-screen-with-no-errors-on-nuxt-js-app/47481/1 "2021-04-07T22:02:22Z")

</div>

**Description**  
I’ve installed `"@zoomus/websdk": "^1.9.1",` on Vue/Nuxt JS App and configured `zoom-sdk.js` on nuxt.config.js file with client mode (No SSR).

In My `meetings.vue` file:

```
<template>

  <div class="meeting">

    <div class="container-zoom">

      <ZoomFrame :nickname="nickname" :meetingId="meetingId" :password="password" />

    </div>

  </div>

</template>

<script>

import ZoomFrame from "~/components/Zoom/ZoomFrame.vue";

export default {

  name: "app",

  data: function () {

    return {

      nickname: "My Nick Name",

      meetingId: "MY MEETING ID",

      password: "MEETING PASSWORD",

    };

  },

  components: {

    ZoomFrame,

  },

};

</script>

<style scoped>

.container-zoom {

  width: 70%;

  height: 100%;

}

</style>

```

In My `ZoomFrame.vue` file:

```
<template>

  <div>

    <div id="zmmtg-root"></div>

    <div id="aria-notify-area"></div>

  </div>

</template>

<script>

export default {

  props:['nickname','meetingId','password'],

  created() {

    const meetConfig = this.$MeetingCfg(this.meetingId, this.nickname, this.password);

    const ZoomMtg = this.$ZoomMtg;

    // Generate Signature function

    const signature = ZoomMtg.generateSignature({

      meetingNumber: meetConfig.meetingNumber,

      apiKey: meetConfig.apiKey,

      apiSecret: meetConfig.apiSecret,

      role: meetConfig.role,

      success: function (res) {

        // eslint-disable-next-line

        console.log("success signature: " + res.result);

      },

    });

    // join function

    ZoomMtg.init({

      leaveUrl: "https://zoom.us",

      isSupportAV: true,

      success: () => {

        ZoomMtg.join({

          meetingNumber: meetConfig.meetingNumber,

          userName: meetConfig.userName,

          signature: signature,

          apiKey: meetConfig.apiKey,

          userEmail: "spotverge1@gmail.com",

          passWord: meetConfig.passWord,

          success: function (res) {

            // eslint-disable-next-line

            console.log("join meeting success");

          },

          error: function (res) {

            // eslint-disable-next-line

            console.log(res);

          },

        });

      },

      error: function (res) {

        // eslint-disable-next-line

        console.log(res);

      },

    });

  },

};

</script>

```

Finally, in my `zoom-sdk.js` file:

```
import JQuery from "JQuery";

var $=JQuery;

const { ZoomMtg } = require("@zoomus/websdk");

// what variable you hook into Vue's prototype will be available on ANY vue component

import Vue from "vue";

console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

// CDN version default

ZoomMtg.setZoomJSLib("https://dmogdx0jrul3u.cloudfront.net/1.9.1/lib", "/av");

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

const MeetingCfg = (meetingId, nickname, password) => ({

  apiKey: "MY_API_KEY",

  apiSecret: "MY_API_SECRET",

  meetingNumber: meetingId,

  userName: nickname,

  passWord: password,

  leaveUrl: "https://zoom.us",

  role: 0

});

Vue.prototype.$ZoomMtg = ZoomMtg;

Vue.prototype.$MeetingCfg = MeetingCfg;

```

**Error**  
The application starts loading indicator that shows “Joining Meeting” and then returns the black screen with no errors. However, I get the following warning in console:

`DevTools failed to load SourceMap: Could not load content for https://dmogdx0jrul3u.cloudfront.net/1.9.1/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE`

**Which Web Client SDK version?**  
1.9.1

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:

1. Visit website URL
2. Meeting Id, Nickname and Password were already defined by the backend
3. Wait for it to connect
4. See black screen with no errors

**Screenshots**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/3/a/3a61c941bf0d091f672c4fbfc28f64aaec712ebf.png)

**Device:**

- Device: [PC (1366x768 resolution)]
- OS: [Windows 10]
- Browser: [Chrome]
- Browser Version [Version 91.0.4464.5 (Official Build) dev (64-bit)]

**Additional context**  
In network requests, the following URL `https://zoom.us/api/v1/wc/info?meetingNumber=9....` results in the response containing ` errorCode: 0`.

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [April 7, 2021, 10:15pm UTC](https://devforum.zoom.us/t/black-screen-with-no-errors-on-nuxt-js-app/47481/2 "2021-04-07T22:15:32Z")

</div>

Hey @sdriyaz712,

Thank you for reaching out to the Zoom Developer Forum. This can happen if the [Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/web#zoom-web-sdk) dependencies aren’t imported correctly.

While I understand the structure of a Nuxt.js project is different, we do have a [Sample Vue.js App](https://github.com/zoom/websdk-sample-vuejs) which should serve as a reference for how you can implement the Web SDK with a Vue app.

Let me know if that helps. If not, are you able to share a public git repo with your code? I can advise further using that.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![sdriyaz712](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sdriyaz712/32/25605_2.png) [@sdriyaz712](https://devforum.zoom.us/u/sdriyaz712)\
**Post date:** [April 8, 2021, 8:58pm UTC](https://devforum.zoom.us/t/black-screen-with-no-errors-on-nuxt-js-app/47481/3 "2021-04-08T20:58:59Z")

</div>

Hi @MaxM, Thanks a lot for your response and reference. As mentioned, I created the code based on the sample vue app.

However, the screen is stuck forever at “Joining Meeting” loading indicator. I’ve added the [public git repo here](https://github.com/riyaz7us/Nuxt-Zoom-WebSDK) as requested.

I hope this would be resolved as soon as possible. Thanks again 🙂

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [April 8, 2021, 11:34pm UTC](https://devforum.zoom.us/t/black-screen-with-no-errors-on-nuxt-js-app/47481/4 "2021-04-08T23:34:00Z")

</div>

Hey @sdriyaz712,

Thank you for the update. Please confirm that the Sample App that you based your implementation off of is the same as what I linked above. I mention this because I’m seeing some notable differences:

1. You are importing the Web SDK using the Local NPM version whereas the [Sample Vue.js App](https://github.com/zoom/websdk-sample-vuejs) uses the CDN method:

> <https://github.com/zoom/meetingsdk-vuejs-sample/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/public/index.html#L18-L23>

1. You import jQuery which is not required by the Web SDK and is not included in the Sample App

> [@sdriyaz712](#):
>
> ```auto
> import JQuery from "JQuery";
> 
> var $=JQuery;
> 
> ```

1. You’re using a different method to import AV libraries from the CDN (JS file vs integrating with Vue lifecycle):

> <https://github.com/zoom/meetingsdk-vuejs-sample/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/src/components/HelloWorld.vue#L14>

1. You have Meetings.vue, ZoomFrame.vue and zoom-sdk.js which are not included with the [Sample Vue.js App](https://github.com/zoom/websdk-sample-vuejs)

Let me know if that helps.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [May 9, 2021, 9:34am UTC](https://devforum.zoom.us/t/black-screen-with-no-errors-on-nuxt-js-app/47481/5 "2021-05-09T09:34:16Z")

</div>

Closed on May 9, 2021, 9:34am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.