A headless Vue.js component library for SIP/VoIP applications
npm install vuesip> A headless Vue.js component library for SIP/VoIP applications



VueSip provides 60+ composables for building professional SIP interfaces with Asterisk, FreePBX, and other VoIP systems. Built with TypeScript and Vue 3, VueSip gives you the business logic while you control the UI.
- Headless Architecture - Complete separation of logic and UI
- Full SIP Support - WebRTC calling with JsSIP or SIP.js adapters
- Video Calling - One-on-one and conference video support
- Call Quality Monitoring - Real-time WebRTC stats and quality scoring
- Call Center Features - Queues, agents, supervisors, and statistics
- Multi-Line Support - Handle multiple concurrent calls
- UI Agnostic - Works with PrimeVue, Vuetify, Tailwind, or any UI
- TypeScript - Full type safety and IntelliSense
- 50+ Interactive Demos - Working examples for every feature
- Modern Stack - Vue 3, Vite, TypeScript
``bash`
npm install vuesipor
yarn add vuesipor
pnpm add vuesip
`vue`
Manages SIP client connection, registration, and call operations.
`typescript
import { useSipClient } from 'vuesip'
const {
// State
isConnected, // Ref
isRegistered, // Ref
isConnecting, // Ref
error, // Ref
// Connection
connect, // (config: SipClientConfig) => Promise
disconnect, // () => Promise
// Registration
register, // () => Promise
unregister, // () => Promise
} = useSipClient()
`
Manages call state and operations for active/incoming calls.
`typescript
import { useCallSession } from 'vuesip'
const {
// State
currentCall, // Ref
callState, // Ref
callDuration, // Ref
// Call actions
makeCall, // (target: string, options?) => Promise
answer, // (options?) => Promise
hangup, // () => Promise
reject, // () => Promise
// Call controls
hold, // () => Promise
unhold, // () => Promise
mute, // () => Promise
unmute, // () => Promise
} = useCallSession()
`
Manage audio/video devices with permission handling.
`typescript
import { useMediaDevices } from 'vuesip'
const {
// Device lists
audioInputDevices, // Ref
audioOutputDevices, // Ref
videoInputDevices, // Ref
// Selected devices
selectedAudioInput, // Ref
selectedAudioOutput, // Ref
selectedVideoInput, // Ref
// Actions
selectAudioInput, // (deviceId: string) => void
selectAudioOutput, // (deviceId: string) => void
selectVideoInput, // (deviceId: string) => void
requestPermissions, // (audio?, video?) => Promise
refreshDevices, // () => Promise
} = useMediaDevices()
`
Send DTMF (dialpad) tones during calls.
`typescript
import { useDTMF } from 'vuesip'
const {
sendDTMF, // (tone: string) => void
sendDTMFSequence, // (sequence: string, interval?) => Promise
} = useDTMF(callSession)
// Send single digit
sendDTMF('5')
// Send sequence with interval
await sendDTMFSequence('1234#', 200)
`
VueSip includes an interactive playground with 50+ working demos covering every feature:
`bashInstall dependencies
pnpm install
Visit
http://localhost:5173 to explore demos organized by category:$3
| Demo | Description | Key Composables |
| ------------------ | ----------------------------------- | ----------------------------------- |
| BasicCallDemo | One-to-one audio calling |
useSipClient, useCallSession |
| VideoCallDemo | Video calling with camera selection | useMediaDevices, useCallSession |
| MultiLineDemo | Handle multiple concurrent calls | useMultiLine |
| ConferenceCallDemo | Multi-party conferences | useConference |
| CallTransferDemo | Blind and attended transfers | useCallTransfer |$3
| Demo | Description | Key Composables |
| -------------------- | ------------------------ | ------------------ |
| DtmfDemo | Send DTMF tones |
useDTMF |
| CallTimerDemo | Call duration tracking | useCallSession |
| CallWaitingDemo | Handle call waiting | useCallSession |
| AutoAnswerDemo | Automatic call answering | useSipAutoAnswer |
| CallMutePatternsDemo | Advanced mute controls | useCallControls |$3
| Demo | Description | Key Composables |
| ---------------------- | ------------------------- | ---------------------------- |
| CallQualityDemo | Real-time quality metrics |
useCallQualityScore |
| WebRTCStatsDemo | WebRTC statistics | useSipWebRTCStats |
| NetworkSimulatorDemo | Test network conditions | useNetworkQualityIndicator |
| ConnectionRecoveryDemo | Auto-reconnection | useConnectionRecovery |$3
| Demo | Description | Key Composables |
| ---------------- | -------------------- | ------------------ |
| AgentLoginDemo | Agent authentication |
useAmiAgentLogin |
| AgentStatsDemo | Agent performance | useAmiAgentStats |
| QueueMonitorDemo | Queue statistics | useAmiQueues |
| SupervisorDemo | Spy/whisper/barge | useAmiSupervisor |
| CDRDashboardDemo | Call detail records | useAmiCDR |$3
| Demo | Description | Key Composables |
| ---------------------- | --------------------- | ----------------------- |
| PictureInPictureDemo | PiP video display |
usePictureInPicture |
| ScreenSharingDemo | Screen sharing | useMediaDevices |
| CallRecordingDemo | Server-side recording | useAmiRecording |
| RecordingIndicatorDemo | Recording status | useRecordingIndicator |
| ConferenceGalleryDemo | Gallery video layout | useGalleryLayout |$3
| Demo | Description | Key Composables |
| ---------------- | -------------------- | -------------------- |
| PresenceDemo | User presence status |
usePresence |
| SipMessagingDemo | SIP MESSAGE support | useMessaging |
| VoicemailDemo | Voicemail management | useAmiVoicemail |
| PagingDemo | Paging/intercom | useAmiPaging |
| BLFDemo | Busy lamp field | useFreePBXPresence |$3
| Demo | Description | Key Composables |
| ---------------------- | ------------------- | ------------------------ |
| AudioDevicesDemo | Device management |
useMediaDevices |
| SettingsDemo | Persistent settings | useSettingsPersistence |
| SessionPersistenceDemo | Session recovery | useSessionPersistence |
| CallHistoryDemo | Call logs | useCallHistory |
| SpeedDialDemo | Speed dial contacts | useSettings |View all 50+ demos in the playground →
All Composables by Category
$3
-
useSipClient - SIP connection and registration
- useCallSession - Call state and operations
- useCallControls - Hold, mute, transfer controls
- useSipRegistration - Registration management$3
-
useDTMF - DTMF tone sending
- useCallTransfer - Blind/attended transfers
- useCallHold - Hold/unhold operations
- useMultiLine - Multi-line phone support
- useConference - Conference calling
- useSipAutoAnswer - Auto-answer rules
- useSipSecondLine - Second line support$3
-
useMediaDevices - Audio/video device management
- useAudioDevices - Audio-specific device control
- usePictureInPicture - Picture-in-picture video
- useVideoInset - Video inset positioning
- useGalleryLayout - Conference gallery layout
- useActiveSpeaker - Active speaker detection
- useLocalRecording - Client-side recording
- useBandwidthAdaptation - Adaptive bitrate$3
-
useCallQualityScore - Quality scoring (A-F grades)
- useNetworkQualityIndicator - Network quality indicators
- useSipWebRTCStats - Raw WebRTC statistics
- useConnectionRecovery - Auto-reconnection$3
-
useAmi - Base AMI connection
- useAmiAgentLogin - Agent authentication
- useAmiAgentStats - Agent performance stats
- useAmiQueues - Queue management
- useAmiSupervisor - Supervisor controls
- useAmiCDR - Call detail records
- useAmiCalls - Call monitoring
- useAmiRecording - Recording control
- useAmiVoicemail - Voicemail access
- useAmiParking - Call parking
- useAmiPaging - Paging/intercom$3
-
usePresence - User presence status
- useMessaging - SIP MESSAGE support
- useFreePBXPresence - FreePBX BLF/presence$3
-
useSessionPersistence - Session recovery
- useSettingsPersistence - Persistent settings
- useCallHistory - Call log management
- useSettings - Application settings$3
-
useOAuth2 - OAuth2 authentication
- useSipE911 - E911 emergency services
- useRecordingIndicator - Recording status display
- useDialog - SIP dialog management
- useParticipantControls - Conference participant managementDevelopment
`bash
Install dependencies
pnpm installRun playground with all demos
pnpm devBuild library
pnpm buildRun tests
pnpm testType checking
pnpm typecheckLint
pnpm lint
`Use Cases
- Enterprise Softphones - Full-featured desktop phone applications
- Call Centers - Agent dashboards with queue management
- Click-to-Call - Embed calling in web applications
- Video Conferencing - Multi-party video meetings
- CRM Integration - Add calling to customer management systems
- Telemedicine - Healthcare video consultations
- Help Desk - Support ticket calling integration
Browser Support
| Browser | Version | Notes |
| ----------- | ------- | ------------ |
| Chrome/Edge | 90+ | Full support |
| Firefox | 88+ | Full support |
| Safari | 14+ | Full support |
Requires WebRTC and modern JavaScript support.
Architecture
VueSip follows the headless component pattern:
`
┌─────────────────────────────────────────────┐
│ Your Application │
├─────────────────────────────────────────────┤
│ Your UI Components (PrimeVue, Vuetify...) │
├─────────────────────────────────────────────┤
│ VueSip Composables (Business Logic) │
├─────────────────────────────────────────────┤
│ Adapters (JsSIP, SIP.js, or Custom) │
├─────────────────────────────────────────────┤
│ SIP Server (Asterisk, etc.) │
└─────────────────────────────────────────────┘
`TypeScript Support
Full TypeScript support with comprehensive type exports:
`typescript
import type {
SipClientConfig,
CallSession,
CallState,
CallDirection,
MediaDeviceInfo,
ConferenceParticipant,
QualityScore,
// ... 100+ types
} from 'vuesip'
``- Guide - Getting started and tutorials
- API Reference - Complete API documentation
- Examples - Usage examples and patterns
- Playground - Live interactive demos
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
Built with:
- Vue 3 - The Progressive JavaScript Framework
- JsSIP / SIP.js - SIP library adapters
- TypeScript - Type safety
- Vite - Next generation frontend tooling
- Vitest - Testing framework