Build a Video Calling App in Vue.js with ZEGOCLOUD 🚀

Introduction

Video calling has become an essential feature in modern applications, and ZEGOCLOUD API makes it incredibly easy to integrate. With just a few lines of code, you can build a complete video and audio calling system, live streaming, separate rooms, in-app chat, and much more.

One of the best things about ZEGOCLOUD is that when you create an account, you get 10,000 free minutes to test or deploy a basic version of your application — how amazing is that? Whether you’re working on a small project or a full-scale app, ZEGOCLOUD provides a seamless experience.

This article will guide you step by step through building a video calling app in Vue.js. The best part? You don’t need to write complex code — just follow along and copy the snippets from this article or directly from ZEGOCLOUD’s official website.

And it doesn’t stop here! If you prefer Angular, React, or other modern frameworks, ZEGOCLOUD provides specific code for each, so you can implement video and audio calling wherever you feel comfortable.

By the end of this guide, you will have a fully functional Vue.js video calling app — built in the simplest way possible, without wasting any time. Let’s get started! 🚀

Prerequisites and Setup

Before getting started, make sure you have the following installed and ready:

1️⃣ Node.js (Required for Vue.js)

Ensure Node.js is installed on your system. If you haven’t installed it yet, you can do so with the following command:

npm install -g nodejs

To check if Node.js is installed or needs an update, run:

node -v  # Check installed version
npm update nodejs  # Update Node.js if needed

2️⃣ Vue.js Project Setup

If Vue.js is not installed, you can install it globally using:

npm install -g @vue/cli

Now, create a new Vue.js project for the video calling app:

vue create videocallingapp

Navigate into the project folder:

cd videocallingapp

3️⃣ Sign Up for a ZEGOCLOUD Account

To use ZEGOCLOUD SDK, sign up for a free account and get your App ID and App Sign here:

🔗 Sign Up on ZEGOCLOUD

After signing up, you will receive 10,000 free minutes to test and deploy your video calling application.

Let’s Start: Building a Video Calling App with ZEGOCLOUD in Vue.js

Now that we have everything set up, let’s start integrating ZEGOCLOUD into our Vue.js application step by step.

Step 1: Install the ZEGOCLOUD SDK

To integrate ZEGOCLOUD into your Vue.js project, install the SDK using npm:

npm install @zegocloud/zego-uikit-prebuilt

Step 2: Get Your App ID and App Sign

Log in to ZEGOCLOUD and navigate to the developer console to obtain your App ID and App Sign. These credentials are required to initialize the SDK.

⚠️ Important: Keep your App ID and App Sign private! Never expose them publicly.

Step 3: Initialize the SDK in Vue.js

Now, modify your App.vue file to initialize the ZEGOCLOUD SDK and create a function to start a video call.

<script>
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

export default {
  name: 'App',
  methods: {
    startCall() {
      function randomID(len = 5) {
        const chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP';
        return Array.from({ length: len }, () => chars.charAt(Math.floor(Math.random() * chars.length))).join('');
      }

      const roomID = new URLSearchParams(window.location.search).get('roomID') || randomID(5);
      const serverSecret = 'your_serverSecret'; // Replace with your actual server secret
      const appID = your_appID; // Replace with your actual App ID
      const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, randomID(5), randomID(5));

      // Create instance object from Kit Token
      const zp = ZegoUIKitPrebuilt.create(kitToken);

      // Start the call
      zp.joinRoom({
        container: this.$refs.root,
        sharedLinks: [{
          name: 'Personal link',
          url: `${window.location.protocol}//${window.location.host}${window.location.pathname}?roomID=${roomID}`,
        }],
        scenario: {
          mode: ZegoUIKitPrebuilt.VideoConference,
        },
      });
    },
  },
};
script>

Step 4: Create the Video Call Component

Create a VideoCall.vue component to manage video calls:

<template>
  
    
      
         lg="12">
           class="d-flex justify-content-center my-5">
             @click="startCall" class="callBtn">Start Call
          
        
      
    
  
template>

<script>
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';
export default {
  name: 'VideoCall',
  methods: {
    startCall() {
      // (Same function as in App.vue for generating room and joining call)
    }
  }
};
script>

Step 5: Register the Component in Your App

Add the VideoCall.vue component to your App.vue file:

<template>
  
    Vue.js Video Call App
     />
  
template>

<script>
import VideoCall from './components/VideoCall.vue';

export default {
  components: {
    VideoCall,
  },
};
script>

Step 6: Run the App 🚀

Now, start your Vue.js project by running:

npm run serve

Your Vue.js video calling app is now up and running! 🎉

🎬 Want a Video Tutorial?

If you prefer watching a video instead of reading, check out my tutorial on YouTube where I explain the entire process step by step! 🎥

🔗Watch

Conclusion

Congratulations! 🎉 You have successfully built a Vue.js video calling app using ZEGOCLOUD. With just a few lines of code, you now have a working video call feature in your application.

If you found this article helpful, leave a like, share it, and follow me for more awesome tutorials! 🚀