# Black screen and no responsive in nuxtjs

**URL:** <https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556>\
**Category:** Web\
**Created:** [April 21, 2021, 9:20pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556 "2021-04-21T21:20:22Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhernandez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhernandez/32/17339_2.png) [@dhernandez](https://devforum.zoom.us/u/dhernandez)\
**Post date:** [April 21, 2021, 9:20pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/1 "2021-04-21T21:20:23Z")

</div>

**Description**  
Hello, I have a problem when implementing the sdk zoom web in nuxtjs, at the time of doing it I get two warnings and the screen is black, I must update the page again and I can only enter there. Also, the responsive does not work and I get two errors, according to the forum says that I must enter the links and scripts correctly, I have already done that but it still does not work

**Error**  
It does not enter until the page is refreshed again and the responsive does not work

**Which Web Client SDK version?**  
I am using version 1.8.1 for css and version 1.9.0 in script, since if I use 1.9.1 the camera does not close until I give a next click

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

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

**Screenshots**

 ![issue](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/b/bb57d49a658c571f1881679f833a953cb5bb0fe2.png) ![issue3](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/0/c/0c5dfef29fc6bb0d0eb8754f8994cc7a457bbc93.png) ![issue2](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/5/b55950f76d583789345c5d0005a2a346c674badf.png)

**Device (please complete the following information):**  
All

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [April 22, 2021, 1:36pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/2 "2021-04-22T13:36:40Z")

</div>

Hi, @dhernandez,

Thank you for posting in the Developer Forum. We recommend using the latest version of the SDK 1.9.1, please can you try upgrading from 1.8.1 and see if the issue persists? There have been [multiple bug fixes](https://marketplace.zoom.us/docs/guides/stay-up-to-date/changelog) since your version of the SDK. The behavior you are experiencing seems to be because of the use of different version in your implementation. Our latest version 1.9.1 has the latest improvements and we strongly recommend that you update for the most robust support.

Please let me know if this helps.

Best,  
Donte

---

<div class="post-metadata">

**Author:** ![dhernandez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhernandez/32/17339_2.png) [@dhernandez](https://devforum.zoom.us/u/dhernandez)\
**Post date:** [April 22, 2021, 3:55pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/3 "2021-04-22T15:55:19Z")

</div>

Hi, I am using version 1.8.1 for css and scripts with version 1.9.1 because the camera does not close until I give a next click if I only use version 1.9.1, this problem I am already commenting on above, but it does not respond to the problem I have at the moment. Please can you help me with this problem, since if I use everything with version 1.9.1 I still have the problems that I described above? Thanks

---

<div class="post-metadata">

**Author:** ![dhernandez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhernandez/32/17339_2.png) [@dhernandez](https://devforum.zoom.us/u/dhernandez)\
**Post date:** [April 22, 2021, 4:47pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/4 "2021-04-22T16:47:11Z")

</div>

Current bugs with version 1.9.0  
 ![issue2](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/5/b55950f76d583789345c5d0005a2a346c674badf.png)

 ![issue4](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/3/0/3075541652c34a3cf842b0b4e5cc2389ad601bcf.png)

---

<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 23, 2021, 9:27pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/5 "2021-04-23T21:27:05Z")

</div>

Hey @dhernandez,

Thank you for providing more information. First, I’ll note that version 1.8.5 brought with it a required update so you’ll want to make sure that you are using the latest version of the [Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/web#zoom-web-sdk) (1.9.1).

Further, it looks like the errors that you’re seeing are related to issues importing dependencies within Vue. Please see our [Sample Vue.js App](https://github.com/zoom/websdk-sample-vuejs) and use that as a reference when building with Nuxt.js.

I encountered those same issues when writing the Sample App. It was due to the fact that I was attempting to import dependencies through NPM (package.json) when the [CDN method](https://marketplace.zoom.us/docs/sdk/native-sdks/web/build#option-2-import-through-cdn) is what works with Vue.js.

Specifically, we can see that dependencies are imported in index.html:

> <https://github.com/zoom/websdk-sample-vuejs/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/public/index.html#L10-L11>

> <https://github.com/zoom/websdk-sample-vuejs/blob/master/public/index.html#L18-L23>

Let me know if that helps.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![dhernandez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhernandez/32/17339_2.png) [@dhernandez](https://devforum.zoom.us/u/dhernandez)\
**Post date:** [April 23, 2021, 10:05pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/6 "2021-04-23T22:05:12Z")

</div>

Hi @MaxM I have linked the dependencies in different ways and the problem is the same, either with version 1.9.0 and 1.9.1, I do not use NPM, only CDN and the problem persists and I do not know what is the reason for these errors?

---

<div class="post-metadata">

**Author:** ![dhernandez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhernandez/32/17339_2.png) [@dhernandez](https://devforum.zoom.us/u/dhernandez)\
**Post date:** [April 23, 2021, 10:14pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/7 "2021-04-23T22:14:02Z")

</div>

One more thing, I do not link the dependencies in the nuxt.config since when I do that the rest of my application does not work, which led me to link locally as you indicate, but it does not work

---

<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 23, 2021, 10:36pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/8 "2021-04-23T22:36:53Z")

</div>

Hey @dhernandez,

Thank you for the update. If you’re able to provide a git repo or a URL for your codebase where you see this issue, I’m happy to take a look and see if I can spot any issues there.

If you don’t want to share that information here, you can send an email to [developersupport@zoom.us](mailto:developersupport@zoom.us) with a link to this thread and that information.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![dhernandez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhernandez/32/17339_2.png) [@dhernandez](https://devforum.zoom.us/u/dhernandez)\
**Post date:** [April 23, 2021, 11:12pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/9 "2021-04-23T23:12:41Z")

</div>

Thank you very much @MaxM I attach the repository of the part of the problem with the sdk zoom so that you can help me to verify if the links and the structure in the code are correct, I await your prompt response, thank you.

> **[Cuervo20/testZoom](https://github.com/Cuervo20/testZoom)**
>
> Contribute to Cuervo20/testZoom development by creating an account on GitHub.

---

<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 23, 2021, 11:51pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/10 "2021-04-23T23:51:25Z")

</div>

Hey @dhernandez,

Thanks for providing that, I can see that you are explicitly rendering the Web SDK client side, that’s a good practice with Nuxt.js. Here are a couple of things I noticed, let me know if they are helpful:

On the following line, you are importing the Web SDK from a local path:

> <https://github.com/Cuervo20/testZoom/blob/2b57c308401b78428eb25ebd35472b8898a1e9a8/components/ZoomWindow.vue#L23>

However, at the end of the file, you are also importing the Web SDK from the CDN:

> <https://github.com/Cuervo20/testZoom/blob/2b57c308401b78428eb25ebd35472b8898a1e9a8/components/ZoomWindow.vue#L151>

This seems to indicate that files are being requested from both the local and CDN methods. I’ve seen the exact error you are encountering when making that mistake before too.

Next, I’m seeing that you add the `zmmtg-root` div element on your page but this should actually be injected by the Web SDK at runtime. Please try removing that div to avoid any conflicts.

> <https://github.com/Cuervo20/testZoom/blob/2b57c308401b78428eb25ebd35472b8898a1e9a8/components/ZoomWindow.vue#L7>

Finally, once you are importing exclusively from the Web SDK, the best method to access the ZoomMtg object is by adding it to the Vue object prototype:

> <https://github.com/zoom/websdk-sample-vuejs/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/src/main.js#L6>

Then, within a component, you can reference the ZoomMtg object using `this` to refer to the Vue object:

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

With Nuxt.js, (I’m not a Nuxt expert but I have dabbled) I think that the Vue instance is actually contained within [context.app](https://github.com/zoom/websdk-sample-vuejs/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/src/components/HelloWorld.vue#L14-L16)

Let me know if that helps! 🙂

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![dhernandez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhernandez/32/17339_2.png) [@dhernandez](https://devforum.zoom.us/u/dhernandez)\
**Post date:** [April 26, 2021, 4:49pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/11 "2021-04-26T16:49:19Z")

</div>

Hi @MaxM sorry for the delay in answering you, I was trying to implement all the changes you sent me but at the time of doing it I get the following error and I cannot identify why that happens, I have updated the github repository for you to help me review it, thank you very much

 ![issue5](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/f/6/f60a5ff67cc71737e42c4e6290549d63d4f70af7.png)

---

<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:** [April 27, 2021, 5:00pm UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/12 "2021-04-27T17:00:17Z")

</div>

Hey @dhernandez ,

I have seen you have created a new thread:

> [@Error using Web SDK CDN in nuxt](https://devforum.zoom.us/t/error-using-web-sdk-cdn-in-nuxt/48930):
>
> Description Hi, I have implemented the Web SDK CDN as indicated in a previous section: but I am getting a new error Error The error occurs as soon as I enter the part where the sdk is implemented Which Web Client SDK version? 1.9.1 To Reproduce(If applicable) Steps to reproduce the behavior: Go to ‘…’ Click on ‘…’ Scroll down to ‘…’ See error Screenshots If applicable, add screenshots to help explain your problem. Device (please complete the following information): All …

We will support you in that thread now. 🙂

Thanks,  
Tommy

---

<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 28, 2021, 3:01am UTC](https://devforum.zoom.us/t/black-screen-and-no-responsive-in-nuxtjs/48556/13 "2021-05-28T03:01:06Z")

</div>

Closed on May 28, 2021, 3:01am UTC

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