hideInGuideShowcase: true # Video Rooms with Vue 3 Using the SignalWire Video API and Javascript SDK you can quickly build an app that leverages powerful video conferencing features along with Room Previews and fully customize the experience for your users. This [sample application](https://github.com/signalwire/signalwire-video-vuejs) relies on the [SignalWire Video API](/rest/signalwire-rest/endpoints/video/video-api) and the [SignalWire Javascript SDK](/sdks/reference/browser-sdk/00-browser-sdk-reference.mdx). We do all the heavy lifting so that all you need to do is focus on building your application. ## Table of Contents - [Features](#features) - [Getting Started](#getting-started) - [Local Setup](#local-setup) - [Using Replit](#using-replit) - [Frontend Docs](#frontend-docs) - [Backend Docs](#backend-docs) ## Features - Join or Create temporary Room Sessions - Meeting controls such as Mute Audio/Video and Share Screen - Change Camera and Microphone devices - Change Room Layouts - List Rooms with Room Previews - Join Active Rooms from the homepage ## Getting Started The application has two parts, the [frontend](https://github.com/signalwire/signalwire-video-vuejs/tree/master/frontend) and the [backend](https://github.com/signalwire/signalwire-video-vuejs/tree/master/backend). Theyre built to run independently but the frontend does require the backend in order to make requests to the SignalWire Video API. Instructions are provided for running each independently in a virtual environment using [Replit](https://replit.com) or running locally on your machine. ### Local Setup This guide walks you through setting up the example application using a terminal and NodeJS. At the time of writing this it has been tested on OSX and Linux. These instructions assume you have basic understanding of working within a terminal and have NodeJS, NPM and Git installed. Before beginning youll need to create a SignalWire Space and obtain some credentials. See [Getting Started with the SignalWire Video API](guides/video-api/getting-started/getting-started-with-the-signalwire-video-api-1/index.mdx). Once you have credentials, start by cloning this repository locally. bash git clone https://github.com/signalwire/signalwire-video-vuejs #### Backend 1. Install node modules for the backend. bash cd signalwire-video-vuejs/ cd ../backend npm install 2. Configure your SignalWire Space URL, Project-ID and API-Token in an environment file named .env in the backend directory. Optionally you can change the Port that the backend is served on from here as well. If running both the frontend and backend on the same machine, please avoid using port 8080. USERNAME= API_TOKEN= API_URL=https://.signalwire.com/api/video PORT=3080 3. Start the backend server using NodeJS. bash node index.js #### Frontend 1. Open another terminal, navigate to the repository, and install node modules for the frontend. bash cd signalwire-video-vuejs/ cd frontend/ npm install 2. Optionally configure an environment file named .env in the frontend directory. By default the project expects the backend URL to be hosted at localhost:3080. You can customize this with the VUE_APP_URL environment variable. env VUE_APP_URL=http://backend.com 3. You can serve the frontend with a hot-reload (updates on code changes) using the following command. bash npm run serve The application should then be hosted at localhost:8080. ### Using Replit This guide walks you through using Replit, a cloud based coding environment, to run both the backend and the frontend. The end result is a hosted instance with a link that can be shared for others to use. Replit is a cloud-based coding environment. It lets you upload code and run it in a virtual machine from your browser, for free! We have two premade Replits that you can fork to run the frontend and the backend. There are some variables that need to be set first. This guide walks you through that. Before beginning youll need to create a SignalWire Space and obtain some credentials. See [Getting Started with the SignalWire Video API](/guides/getting-started-with-the-signalwire-video-api-1). #### Replit Backend 1. Navigate to [here](https://replit.com/@virgilvox/signalwire-video-vuejs-backend) 2. Click on **fork**. 3. From the side menu select the lock shaped icon to open the **Secrets (Environment Variables)** options. 4. Click on **Edit raw JSON**. Paste in the following and add your own credentials. json { USERNAME: , API_TOKEN: , API_URL: https://.signalwire.com/api/video, PORT: 8080 } 5. Click **Run** to start the server. 6. One running, the preview browser will display a link in its address bar. Copy this, youll need it to configure the backend. #### Replit Frontend 1. Navigate to [here](https://replit.com/@virgilvox/signalwire-video-vuejs-frontend). 2. Click on **fork**. 3. From the side menu select the lock shaped icon to open the **Secrets (Environment Variables)** options. 4. Add a new secret with the key VUE_APP_URL. Paste in the URL for the backend and click **Add new secret**. 5. Click **Run**. ## Frontend Docs The frontend is built in Vue 3. This doc goes over all the components, framework specific details, and the api helper class. [Frontend Docs](https://github.com/signalwire/signalwire-video-vuejs/blob/master/docs/frontend.md) ## Backend Docs The backend is a simple NodeJS Express server. It interacts with the SignalWire API. [Backend Docs](https://github.com/signalwire/signalwire-video-vuejs/blob/master/docs/backend.md)