Mobile apps remain essential for delivering smooth, native-like experiences. However, maintaining separate codebases for Android and iOS can significantly increase development costs and slow down delivery. With open-source platforms like Capacitor combined with modern frontend frameworks (Vue, React, or Angular),
developers can bridge the web-native gap and accelerate timelines.
In this blog, we’ll explore what Capacitor is, why it matters, best practices for using it with Vue/React/Angular, and how Blue Altair successfully leveraged these technologies to build a real world
cross-platform solution.
Capacitor is an open-source native runtime developed by the Ionic team. It allows developers to run web apps (built with Vue, React, or Angular) as fully native mobile applications on both Android and iOS.
At its core, Capacitor encapsulates standard web code, enabling a Vue-,React-, or Angular-based single-page app (SPA) to be deployed as a fully self contained iOS or Android binary—with direct access to native device APIs such as camera, filesystem, geolocation, and push notifications.
By pairing frontend frameworks for UI development with Capacitor (and optionally Ionic) for packaging and native integration, developers can achieve two platforms from one codebase, reducing both development time and ongoing maintenance.
Capacitor isn’t just another wrapper—it’s a powerful runtime that bridges the gap between web and mobile development. It allows you to continue using your existing frontend framework (React, Vue, or Angular) while unlocking direct access to native APIs and components.
Need to call native code or build custom plugins? Capacitor makes it straightforward. Compared to Cordova, it provides better web compatibility and smoother performance. Plus, its CLI can generate native iOS and Android projects that open directly in Xcode or Android Studio.
In short: you write a web app, but you deploy a fully native experience across Android and iOS.
Think of Capacitor as the translator that lets your web app speak “native.” Here’s how the pieces connect:
Before building a custom plugin, always check the community ecosystem—chances are, someone has already built it.
Testing remains robust—we use Jest for unit testing and Playwright for end-to-end testing.
1. For CI/CD, our Azure pipeline: Runs tests on PRs
2. Builds Android and iOS artifacts
3. Deploys to TestFlight and the Play Store’s internal testing track
Capacitor’s plugin system (official + community-developed) is one of its biggest advantages. Commonly used
plugins include:
• Camera
• Gallery
• Geolocation
• SQLite (offline-first)
• Network
• Firesystem
• Browser
• Google Maps
• Push Notifications
To maximize results with Capacitor and Vue/React/Angular:
• Keep your web code modular to increase reusability across platforms.
• Test on real devices early, not just simulators.
• Use Capacitor plugins first before writing custom integrations.
• Plan CI/CD pipelines to streamline app store deployments.
The Payoff
• Time-to-Market: Reduced by 50% compared to traditional native builds
• Code Reuse: Achieved 90%+ reuse of UI and business logic across web, Android, and iOS
• Maintenance Efficiency: Centralized updates enabled faster fixes and smoother deployments
Building for multiple platforms no longer requires juggling multiple codebases. With Capacitor and
frameworks like Vue, React, or Angular, businesses can achieve a native-quality experience from a
single source of truth—accelerating delivery, cutting costs, and ensuring consistency across devices.
At Blue Altair, we’ve seen firsthand how this approach transforms digital projects. Our cross platform
inventory management app delivered faster time-to-market, higher code reuse, and lower
maintenance overhead—all from one codebase.