Zoom Meeting SDK Vue.js sample

Use of this sample app is subject to our Terms of Use.

---

NOTE: This sample app has been updated to use Vue 3 since Vue ended support for Vue 2 on Dec 31, 2023.

---

This repo is a Vue.js app generated via Create Vue, the official Vue project scaffolding tool, that uses the Zoom Meeting SDK to start and join Zoom meetings and webinars.

Installation

To get started, clone the repo:

$ git clone https://github.com/zoom/meetingsdk-vuejs-sample.git

Setup

1. Once cloned, navigate to the meetingsdk-vuejs-sample directory:

   $ cd meetingsdk-vuejs-sample

2. Then install the dependencies:

   $ npm install

3. Open the meetingsdk-vuejs-sample directory in your code editor.

4. Open the src/components/HelloWorld.vue file, and enter values for the variables:

   NEW: To use the Component View, replace HelloWorld.vue with HelloWorldNew.vue. (The leaveUrl is not needed). Also, uncomment the Component View CSS tags and comment out the Client View CSS in index.html.

   Variable	Description
   authEndpoint	Required, your Meeting SDK auth endpoint that securely generates a Meeting SDK JWT. Get a Meeting SDK auth endpoint here.
   sdkKey	Required, your Zoom Meeting SDK Key or Client ID for Meeting SDK app type's created after February 11, 2023. You can get yours here.
   meetingNumber	Required, the Zoom Meeting or webinar number.
   passWord	Optional, meeting password. Leave as empty string if the meeting does not require a password.
   role	Required, 0 to specify participant, 1 to specify host.
   userName	Required, a name for the user joining / starting the meeting / webinar.
   userEmail	Required for Webinar, optional for Meeting, required for meeting and webinar if registration is required. The email of the user starting or joining the meeting / webinar.
   registrantToken	Required if your meeting or webinar requires registration.
   zakToken	Required to start meetings or webinars on external Zoom user's behalf, the authorized Zoom user's ZAK token. The ZAK can also be used to join as an authenticated participant.
   leaveUrl	Required for Client View, the url the user is taken to once the meeting is over.

   Example:

   var authEndpoint = 'http://localhost:4000'
   var sdkKey = 'abc123'
   var meetingNumber = '123456789'
   var passWord = ''
   var role = 0
   var userName = 'Vue.js'
   var userEmail = ''
   var registrantToken = ''
   var zakToken = ''
   var leaveUrl = 'http://localhost:5173'

5. Save HelloWorld.vue.

6. Run the app:

   $ npm run dev

Usage

1. Navigate to http://localhost:5173 and click "Join Meeting".

   Client View

   

   Component View

   

   Learn more about Gallery View requirements and see more product screenshots.

Deployment

The Vue.js Sample App can be easily deployed to GitHub Pages, or another static web hosting service, like an AWS S3 bucket.

GitHub Pages

1. Create a repo on GitHub.

2. Add the remote to your project:

   $ git remote add origin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git

3. Open the vite.config.js file and replace the base value of / with your GitHub repo name surrounded by slashes like this: /GITHUB_REPO_NAME/.

4. Build your project:

   $ npm run build

5. Rename the dist folder to docs

6. Git add, commit, and push your project:

   $ git add -A

   $ git commit -m "deploying to github"

   $ git push origin master

7. On GitHub, in your repo, navigate to the "settings" page, scroll down to the "GitHub Pages" section, and choose the "master branch /docs folder" for the source.

8. Now your project will be deployed to https://GITHUB_USERNAME.github.io/GITHUB_REPO_NAME.

Other Static Web Hosting

1. Build your project:

   $ npm run build

2. Deploy the complied /dist directory to a static web hosting service, like an AWS S3 bucket.

Advanced Deployment

For more advanced instructions on deployment, see the Vue.js Deployment docs.

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.