PurpleCallio documentation
Add Video Calling to Vue
The PurpleCallio Vue SDK wraps the same call engine as the JavaScript SDK in a Composition API composable, exposing connection state, participants, and media as reactive refs.
Install the package
npm install @purplecallio/vue @purplecallio/sdk. Requires Vue 3.2 or later.
Join a call with a composable
Call usePurpleCallio() with a participant token from your backend, then join() to connect signaling and WebRTC. Each call to the composable creates its own engine instance.
Render reactive state
Bind connectionState, participants, remoteStream, and localStream directly in your template, and render streams with the PurpleCallioVideo component.
What's supported
Join/leave, camera and microphone enable/disable/toggle, screen sharing start/stop, live participant and connection-state tracking, and automatic cleanup when the component using the composable unmounts.
Join a call from a Vue component
<script setup lang="ts">
import { usePurpleCallio } from "@purplecallio/vue";
import PurpleCallioVideo from "@purplecallio/vue/components/PurpleCallioVideo.vue";
const { join, leave, localStream, remoteStream, camera } = usePurpleCallio({
token: participantToken,
callId,
signalUrl,
});
join();
</script>
<template>
<PurpleCallioVideo :stream="localStream" muted />
<PurpleCallioVideo :stream="remoteStream" />
<button @click="camera.toggle()">Toggle camera</button>
</template>Related documentation
Build with PurpleCallio
Explore the documentation to choose hosted UI, React components, or the headless SDK for your integration.