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.

Features

- 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

Installation

``bash
npm install vuesip


or

yarn add vuesip

or

pnpm add vuesip
`

Quick Start

`vue

`

Core Composables

$3

Manages SIP client connection, registration, and call operations.

`typescript
import { useSipClient } from 'vuesip'

const {
// State
isConnected, // Ref - Connection state
isRegistered, // Ref - Registration state
isConnecting, // Ref - Connecting state
error, // Ref - Last error

// Connection
connect, // (config: SipClientConfig) => Promise
disconnect, // () => Promise

// Registration
register, // () => Promise
unregister, // () => Promise
} = useSipClient()
`

$3

Manages call state and operations for active/incoming calls.

`typescript
import { useCallSession } from 'vuesip'

const {
// State
currentCall, // Ref - Active call
callState, // Ref - Current call state
callDuration, // Ref - Duration in seconds

// 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()
`

$3

Manage audio/video devices with permission handling.

`typescript
import { useMediaDevices } from 'vuesip'

const {
// Device lists
audioInputDevices, // Ref - Microphones
audioOutputDevices, // Ref - Speakers
videoInputDevices, // Ref - Cameras

// 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()
`

$3

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)
`

Interactive Playground (50+ Demos)

VueSip includes an interactive playground with 50+ working demos covering every feature:

`bash


Install dependencies

pnpm install

Run development server with playground

pnpm dev
`

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 management

Development

`bash


Install dependencies

pnpm install

Run playground with all demos

pnpm dev

Build library

pnpm build

Run tests

pnpm test

Type checking

pnpm typecheck

Lint

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'
``

Documentation

- Guide - Getting started and tutorials
- API Reference - Complete API documentation
- Examples - Usage examples and patterns
- Playground - Live interactive demos

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

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