RoadPhone Pro combines cutting-edge web technologies with Lua scripting to create a seamless smartphone experience in FiveM.
A modern tech stack designed for performance and developer experience.
Vue.js 3, Vite, Pinia, Motion-V
NUI Messages, WebRTC, Event Bus
Lua 5.4, MySQL, Bridge System
// PhoneAPI.js
fetch(`https://${GetParentResourceName()}/eventName`, {
method: 'POST',
body: JSON.stringify(data)
})-- client.lua
SendNUIMessage({
action = 'eventName',
data = payload
})Built with the latest frontend frameworks for a native app-like experience.
The UI is built on Vue.js 3 with the Composition API. Vue enables reactive user interfaces with component-based architecture. Each app is a standalone Vue component.
We use Vite with the experimental Rolldown bundler. Rolldown is a Rust-based bundler that works significantly faster than traditional JavaScript bundlers. The entire build takes under 2 seconds.
Pinia is our state management system. Each app has its own store that manages state. The central phoneStore coordinates global settings like language, theme, and phone number.
For animations, we use motion-v, a Vue wrapper for Motion One. This enables smooth 60fps animations for transitions, gesture controls, and UI feedback - inspired by iOS design.
Reliable backend systems ensuring data persistence and cross-framework compatibility.
FiveM integration is done via Lua 5.4. Client scripts control animations, camera, and local events. Server scripts process database operations and cross-player logic.
Persistent data is stored in MySQL/MariaDB. We use the mysql-async library for asynchronous database queries to avoid blocking the server.
A custom-developed Bridge System abstracts framework-specific code. This enables compatibility with ESX, QBCore, Qbox, and Standalone servers without code changes.
Seamless data flow between the UI, game client, and server.
FiveM embeds a Chromium browser (NUI) that renders the Vue frontend. Communication between Vue and Lua happens via NUI messages.
For video and voice calls, we integrate LiveKit, a WebRTC-based solution. LiveKit enables peer-to-peer connections with low latency.
Internally, Vue uses Mitt as an event bus for component communication. Lua uses native FiveM events for client-server communication.
Professional audio handling for an immersive experience.
Howler.js manages all audio playback: ringtones, notification sounds, UI sounds. The library offers sprite support and automatic format fallback.
For voice messages, we use WaveSurfer.js to visualize audio waveforms. Users see progress as an animated waveform.
Voice recordings are encoded to MP3 client-side using LameJS. This significantly reduces file size before upload.
Translations are stored as separate JSON files per language. The system only loads the active language at startup - additional languages are loaded on demand.
IntlString('GREETING', 'Hello', { name: 'Max' })
// → "Hallo {name}" → "Hallo Max"Every aspect is optimized for minimal resource usage and maximum performance.
Apps are only loaded when opened. Vue Router uses dynamic imports for optimal performance.
Images as WebP, compressed fonts, and SVG icons instead of raster graphics.
Tree-shaking and code-splitting keep the initial bundle small. Large libraries load on demand.
Rust-based Rolldown bundler enables lightning-fast production builds.
Modern tooling for efficient development and code quality.
Fast Rust-based linter for catching errors and maintaining code quality.
Automatic code formatting for consistent style across the codebase.
Debugging components, state, and performance with Vue DevTools.
Get RoadPhone Pro and see the difference modern technology makes.
RoadPhone Pro v2.0.0 - Developed by RoadShop