# Integrate Web-SDK with vue-project **URL:** \ **Category:** Web\ **Created:** [October 7, 2020, 7:19am UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408 "2020-10-07T07:19:24Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 7, 2020, 7:19am UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/1 "2020-10-07T07:19:24Z")
I have trouble in integrating zoom web sdk with Vue project. I follow the zoom documents in intergrating through sdk but keep getting [$ is not defined] error I can make zoom web sdk work smoothly by include script of zoom globally in index.html (through CDN) but, I can not when including it in a vue component ![Screen Shot 2020-10-07 at 14.10.44](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/a/1acee02464e1dfe96beda7f59ed8cedb6a7da1ab.png) Moreover, I have some questions about destroy zoom frame, everytime we receive responses from zoom web sdk, it can be shown through zoom frame, but I want to show actively through my modals. but I don’t know how to destroy the zoom frame, or showing message through my site, because zoom frame may overlap my site Below is the way I want to show error message section.zoom-item //- Overlay Mask to prevent embedded zoom player being clicked .overlay-mask //- Spinner .loading-mask(v-if="!errorMessage") spinner(size=“8em”) //- Main Player .zoom-iframe(v-if="!errorMessage" :class="{show: loading}") zoom-frame(:nickname=“username” :meetingId=“meetingNumber” :password=“password” @error=“showingError”) .messages-wrapper(v-show=“errorMessage”) h1 {{ errorMessage }} p(v-if=“errorMessage”) {{ decodeURIComponent(item.url) }} ---
**Author:** ![will.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/will.zoom/32/14417_2.png) [@will.zoom](https://devforum.zoom.us/u/will.zoom)\ **Post date:** [October 9, 2020, 3:54pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/2 "2020-10-09T15:54:01Z")
Hey @giangthse62424, Thanks for reaching out, happy to help. In regards to the ‘not defined’ error you’re seeing, can you provide some additional details (browser console errors, screenshot), as well as your full code snippet or a link to your repo? I’m happy to take a closer look, and this will help me to debug. As for your inquiry on the Zoom Frame, are you referring to iFraming the SDK? If so, I should note that this is not officially supported, and we recommend implementing the Web SDK in its entirety, outside of any iFrames. Thanks, Will ---
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 12, 2020, 9:01am UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/3 "2020-10-12T09:01:21Z")
Hi Will. Thanks so much for your reply. I’m currently fixing the error And about the second question, the thing I really want to focus on is the ability of auto-generating zmmtg-root to init zoom. Is there any way for us to append zmmtg-root into a specific tag? One more thing that is there any chance for us to disable showing options bar from zoom, I just want to show video and audio only from zoom ![Screen Shot 2020-10-13 at 10.50.54](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/e/cecdeef7e2e92dc593bd7362b386fb095275d93a.png) ![Screen Shot 2020-10-13 at 10.51.16](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/2/a29906ec20e9af110f5bcaaf41772ff1c4fe9766.png) Best regards, John Halliwell ---
**Author:** ![will.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/will.zoom/32/14417_2.png) [@will.zoom](https://devforum.zoom.us/u/will.zoom)\ **Post date:** [October 13, 2020, 7:04pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/4 "2020-10-13T19:04:36Z")
Hey @giangthse62424, > to init zoom. Is there any way for us to append zmmtg-root into a specific tag? Are you referring to an HTML tag or something else? > One more thing that is there any chance for us to disable showing options bar from zoom, I just want to show video and audio only from zoom While you can’t remove the entire options bar, you can hide certain things like the participants/invite button (see [this post](https://devforum.zoom.us/t/use-of-showinvitefunction/12709/2)). You can also consider hiding some of these with custom CSS, if you wish. Let me know if this helps! Best, Will ---
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 14, 2020, 2:42am UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/5 "2020-10-14T02:42:51Z")
> [@will.zoom](#): > > Let me know if this helps! > [@will.zoom](#): > > Are you referring to an HTML tag or something else? Yes, now zmmtg-root append to body. But I want to append to a specific HTML tag, like a div ---
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 14, 2020, 3:12pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/6 "2020-10-14T15:12:53Z")
And do we have any Event Listener or something like that for listening End Meeting event? I tried but found nothing about that ---
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 14, 2020, 4:53pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/7 "2020-10-14T16:53:25Z")
![Screen Shot 2020-10-14 at 23.49.10](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/6/c680f49f3bff54a54f46cb31f79b9b17b312ec9f.png) The above image is the error that I’ve got when integrating into my project. I have a zoom component and another component that is rendered continuously. ---
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 14, 2020, 4:53pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/8 "2020-10-14T16:53:40Z")
![Screen Shot 2020-10-14 at 23.49.19](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/d/9d06ce695a41137c1b6561187d3ff54e6f03f3dc.png) Seem like this error happens when I’m removing Zmmtg-root tag in before destroy hook and rerender the zoom component ---
**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:** [October 15, 2020, 10:37pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/9 "2020-10-15T22:37:59Z")
Hey @giangthse62424, The Zmmtg-root is created and appended automatically. If you remove it, you will run into issues. You can however, use CSS to hide and show it when you would like, take the Angular sample app for example: > > As for the event listener, we do have the inMeetingServiceListener, you can read more about it here: > **[Reference - Web - Client SDKs - Zoom Software Development Kit (Zoom SDK)](https://marketplace.zoom.us/docs/sdk/native-sdks/web/reference)** Please let me know if you are running into any other issues. Thanks, Tommy ---
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 16, 2020, 6:51am UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/10 "2020-10-16T06:51:30Z")
> [@tommy](#): > > Reference - Web - Client SDKs - Zoom Software Development Kit (Zoom SDK) Hi @tommy, This error comes from when rerendering the component which imports zoom SDK, although it runs well in the first time render ![Screen Shot 2020-10-16 at 13.51.04](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/0/4037c3f5b47c8fbbb584c51684b90d8fb8414bad.png) ---
**Author:** ![giangthse62424](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/giangthse62424/32/16588_2.png) [@giangthse62424](https://devforum.zoom.us/u/giangthse62424)\ **Post date:** [October 19, 2020, 4:58pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/11 "2020-10-19T16:58:25Z")
Hi @tommy, lately, I see Zoom up to date info about Zoom Fully Customizable SDK, I don’t know really well the differences between the Zoom Web SDK and Zoom Fully Customizable SDK? One more thing: I want to build an app that supports users who can just only show active zoom meetings on their web browser like a TV show. What’s the best thing for this idea to keep the session of accessing zoom meetings without reaching API limit when users can turn on/turn off multiple times In other words, is there any chance for us to get streaming data from zoom meetings instantly (when the user provides meeting id and password) ---
**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:** [October 20, 2020, 8:05pm UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/12 "2020-10-20T20:05:15Z")
Hey @giangthse62424, > [@giangthse62424](#): > > This error comes from when rerendering the component which imports zoom SDK, The Web SDK is not designed to be re-rendered, and could have issues. > [@giangthse62424](#): > > I see Zoom up to date info about Zoom Fully Customizable SDK, I don’t know really well the differences between the Zoom Web SDK and Zoom Fully Customizable SDK? Here are the differences 🙂 [https://marketplace.zoom.us/docs/sdk#comparing-zoom-sdks](https://marketplace.zoom.us/docs/sdk#comparing-zoom-sdks) > [@giangthse62424](#): > > One more thing: I want to build an app that supports users who can just only show active zoom meetings on their web browser like a TV show. What’s the best thing for this idea to keep the session of accessing zoom meetings without reaching API limit when users can turn on/turn off multiple times > In other words, is there any chance for us to get streaming data from zoom meetings instantly (when the user provides meeting id and password) Great question, have you considered [embedding a live stream of the meeting](https://support.zoom.us/hc/en-us/articles/360028478292-Streaming-a-Meeting-or-Webinar-on-YouTube-Live) on the site? Thanks, Tommy ---
**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:** [November 20, 2020, 6:05am UTC](https://devforum.zoom.us/t/integrate-web-sdk-with-vue-project/32408/13 "2020-11-20T06:05:23Z")
Closed on November 20, 2020, 6:05am UTC This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.