# Zoom for Nuxt JS (Vue JS)

**URL:** <https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268>\
**Category:** Web\
**Created:** [February 26, 2020, 8:09am UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268 "2020-02-26T08:09:07Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhanushka.sandaruwan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhanushka.sandaruwan/32/2137_2.png) [@dhanushka.sandaruwan](https://devforum.zoom.us/u/dhanushka.sandaruwan)\
**Post date:** [February 26, 2020, 8:09am UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/1 "2020-02-26T08:09:07Z")

</div>

I am using Nuxt JS (Vue JS) and I have integrated the zoom sdk in Nuxt JS but give an error as “Window not define”. And website goes to black screen.

NPM SDK: zoomus-websdk

---

<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:** [February 26, 2020, 4:52pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/2 "2020-02-26T16:52:19Z")

</div>

Hey @dhanushka.sandaruwan, thanks for posting and using Zoom!

Please share your code, and steps to reproduce the issue so we can debug.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dhanushka.sandaruwan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhanushka.sandaruwan/32/2137_2.png) [@dhanushka.sandaruwan](https://devforum.zoom.us/u/dhanushka.sandaruwan)\
**Post date:** [February 26, 2020, 6:00pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/3 "2020-02-26T18:00:26Z")

</div>

Hi @tommy Thanks for replying.

We come up with the solution of “Window not define issue” using below code.  
And the come up with the solution of “Black screen” using below post.

> [@Zmmtg-root intervenes on before calling zoom overlay](https://devforum.zoom.us/t/zmmtg-root-intervenes-on-before-calling-zoom-overlay/7003/2):
>
> Hey @radhesh.tantri, thanks for posting and using Zoom! Since the Web SDK overlays the whole page, I suggest using [CSS to hide / show](https://www.sitepoint.com/five-ways-to-hide-elements-in-css/) respectively when you want to. Checkout this thread: We are working on a more customizable one for next year that allows you to invoke on demand. Thanks, Tommy

**Now the issue is this.**

> zoomus-websdk.umd.min.js?478e:2 Uncaught TypeError: $.ajax is not a function  
> at i (zoomus-websdk.umd.min.js?478e:2)  
> at y (zoomus-websdk.umd.min.js?478e:2)  
> at Object.join (zoomus-websdk.umd.min.js?478e:2)  
> at Object.success (ZoomWindow.vue?2b25:33)  
> at z (zoomus-websdk.umd.min.js?478e:2)  
> at t.value (zoomus-websdk.umd.min.js?478e:2)  
> at m (zoomus-websdk.umd.min.js?478e:2)  
> at Object.init (zoomus-websdk.umd.min.js?478e:2)  
> at VueComponent.mounted (ZoomWindow.vue?2b25:29)  
> at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)

_ **Below is the code** _

**zoom.client.js**

```
import Vue from 'vue'

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

console.log("checkSystemRequirements");

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

// CDN version default

ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.3.7/lib', '/av'); 

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

var API_KEY = "we use our own key";

var API_SECRET = "we use our own key";

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

  apiKey: API_KEY,

  apiSecret: API_SECRET,

  meetingNumber: meetingId,

  userName: nickname,

  passWord: "we use meeting crated password",

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

  role: 0

})

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

Vue.prototype.$ZoomMtg = ZoomMtg

Vue.prototype.$MeetingCfg = MeetingCfg

```

**ZoomWindow.vue**

```
<template>

    <div>
    </div>

</template>

<script>

export default {

  props: {

    nickname: String,

    meetingId: String

  },

  mounted () {

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

    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: "http://www.zoom.us",

      isSupportAV: true,

      success: () => {

        ZoomMtg.join({

          meetingNumber: meetConfig.meetingNumber,

          userName: meetConfig.userName,

          signature: signature,

          apiKey: meetConfig.apiKey,

          userEmail: "email@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>

```

**zoom.vue**

```
<template>

  <zoom-window />

</template>

<script>

import ZoomWindow from '~/components/ZoomWindow'

export default {

  components: {

    ZoomWindow

  }

}

</script>

```

**nuxt.config.js**

```
plugins: [

    '~/plugins/zoom.client.js'

  ],

```

---

<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:** [February 26, 2020, 8:38pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/4 "2020-02-26T20:38:24Z")

</div>

Hey @dhanushka.sandaruwan, glad to hear you are making progress!

Can you try importing jquery to your app?

> <https://github.com/zoom/sample-app-web/blob/master/Local/index.html#L42>

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dhanushka.sandaruwan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhanushka.sandaruwan/32/2137_2.png) [@dhanushka.sandaruwan](https://devforum.zoom.us/u/dhanushka.sandaruwan)\
**Post date:** [February 27, 2020, 4:39am UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/5 "2020-02-27T04:39:57Z")

</div>

Hay @tommy Thanks for quick reply.  
Applied the code. That works grate. Thank you very much.  
You save my day.

Another thing to ask from you. Is there any option to set the window size of the zoom view. Because that appears in whole window.

Thanks  
Danushka

---

<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:** [February 27, 2020, 8:15pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/6 "2020-02-27T20:15:25Z")

</div>

Hey @dhanushka.sandaruwan, happy to hear that solved the issue! 🙂

> [@dhanushka.sandaruwan](#):
>
> Is there any option to set the window size of the zoom view. Because that appears in whole window.

Currently the only was to do this would be via CSS.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dhanushka.sandaruwan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhanushka.sandaruwan/32/2137_2.png) [@dhanushka.sandaruwan](https://devforum.zoom.us/u/dhanushka.sandaruwan)\
**Post date:** [February 28, 2020, 8:59am UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/7 "2020-02-28T08:59:20Z")

</div>

Hi, @tommy Thanks for the solution.

Another issue occurred of video showing. Used https localhost but no luck. Video can show when using windows app and the web sdk.

Below error found.  
Uncaught TypeError: t.initSharingEncode is not a function  
at o.connect\_socket (zoomus-websdk.umd.min.js?478e:2)  
at ie (zoomus-websdk.umd.min.js?478e:2)  
at N (zoomus-websdk.umd.min.js?478e:2)  
at eval (zoomus-websdk.umd.min.js?478e:2)  
at eval (index.js?4dd3:11)  
at onTick (zoomus-websdk.umd.min.js?478e:2)  
at eval (zoomus-websdk.umd.min.js?478e:2)  
at Map.forEach ()  
at eval (zoomus-websdk.umd.min.js?478e:2)

---

<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:** [February 28, 2020, 5:04pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/8 "2020-02-28T17:04:11Z")

</div>

Hey @dhanushka.sandaruwan,

Can you please share more details like device, browser, and steps to reproduce the error, with screenshots.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dhanushka.sandaruwan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhanushka.sandaruwan/32/2137_2.png) [@dhanushka.sandaruwan](https://devforum.zoom.us/u/dhanushka.sandaruwan)\
**Post date:** [February 28, 2020, 6:40pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/9 "2020-02-28T18:40:26Z")

</div>

Hey @tommy Firstly, thank you for your support and really appreciate that.

I used android vivo device which version is 8.0 with google chrome browser.  
Other one is the lenovo windows laptop with chrome browser.

I have hosted the above code in https localhost.

**nuxt.config.js**

```
server: {
    https: {
      key: fs.readFileSync(path.resolve("./", 'server.key')),
      cert: fs.readFileSync(path.resolve("./", 'server.crt'))
    }
  },

```

Then access via IP address in same network.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/1/1b909909a00b42b9aa6320661060d8e2804db066.png)

The audio and video not working in windows site.  
But the android device side that is working but we cant see the video rending and sound hearing. Below is the image.

 ![phone image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/9/9d1a80df42eea2211edb93620a9fe31105738981.jpeg)

Regards,  
Danushka

---

<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:** [February 28, 2020, 8:07pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/10 "2020-02-28T20:07:45Z")

</div>

Hey @dhanushka.sandaruwan,

Thanks for these details. What happens when you click the start video button on Windows Chrome?

Make sure you are allowing your browser to access the mic and camera.

-Tommy

---

<div class="post-metadata">

**Author:** ![dhanushka.sandaruwan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhanushka.sandaruwan/32/2137_2.png) [@dhanushka.sandaruwan](https://devforum.zoom.us/u/dhanushka.sandaruwan)\
**Post date:** [February 29, 2020, 3:03pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/11 "2020-02-29T15:03:03Z")

</div>

Hay @tommy,

It asked the camera and mic permissions and i have already allowed it.

![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/e/ed9965ec56521af5b6050000ff4c20b283df9aac.png)

Danushka.

---

<div class="post-metadata">

**Author:** ![dhanushka.sandaruwan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhanushka.sandaruwan/32/2137_2.png) [@dhanushka.sandaruwan](https://devforum.zoom.us/u/dhanushka.sandaruwan)\
**Post date:** [March 2, 2020, 8:36am UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/12 "2020-03-02T08:36:42Z")

</div>

Hi @tommy,

I found the issue. I didn’t use the latest SDK. I was use the 1.3.0 one and latest is 1.7.0.  
Issue solved. Thank for your support.

Danushka

---

<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:** [March 2, 2020, 4:10pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/13 "2020-03-02T16:10:07Z")

</div>

Hey @dhanushka.sandaruwan, happy to hear you upgraded to fix the issue!

Let us know if you have other questions! 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![DeveloperBot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/developerbot/32/12632_2.png) [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 7:28pm UTC](https://devforum.zoom.us/t/zoom-for-nuxt-js-vue-js/8268/14 "2020-08-21T19:28:22Z")

</div>

Closed on August 21, 2020, 7:28pm UTC