Ship iOS and Android apps from Quasar with Capacitor live updates

Quasar is unusual among Vue frameworks: it has a Capacitor mode built right into its CLI, so going from web app to native iOS and Android is a first-class path rather than a bolt-on. Your Quasar components and layouts run unchanged, and you get access to device APIs through Capacitor plugins.

This guide builds native apps from a Quasar project and adds OtaKit for over-the-air updates — so you can ship web-layer fixes without waiting on a store review.

1. Add Capacitor mode

Quasar scaffolds and manages the Capacitor project under src-capacitor. Add the mode, then build for it:

quasar mode add capacitor

# during setup, Quasar asks for an app id and name
# then build and run on a device / simulator
quasar dev -m capacitor -T ios
quasar build -m capacitor -T android

Under the hood, quasar build -m capacitor builds your SPA and syncs it into the native project. You work in your normal Quasar source tree; Quasar handles the Capacitor wiring.

2. Use native device features

Install any Capacitor plugin as usual, then rebuild. Quasar picks it up on the next capacitor build:

npm install @capacitor/camera
quasar build -m capacitor -T ios

import { Camera, CameraResultType } from "@capacitor/camera";

async function takePhoto() {
  const photo = await Camera.getPhoto({ quality: 90, resultType: CameraResultType.Uri });
  return photo.webPath;
}

3. Add live updates with OtaKit

Install the plugin, then configure it in the Capacitor config Quasar manages:

npm install @otakit/capacitor-updater

// src-capacitor/capacitor.config.json
{
  "appId": "com.example.myapp",
  "appName": "My App",
  "webDir": "www",
  "plugins": {
    "OtaKit": { "appId": "YOUR_OTAKIT_APP_ID" }
  }
}

Signal a clean boot from a Quasar boot file so OtaKit can roll back a bad release automatically:

// src/boot/otakit.ts
import { boot } from "quasar/wrappers";
import { Capacitor } from "@capacitor/core";
import { OtaKit } from "@otakit/capacitor-updater";

export default boot(() => {
  if (Capacitor.isNativePlatform()) OtaKit.notifyAppReady();
});

Register the boot file in quasar.config, then release from the built output:

npm install -g @otakit/cli
otakit login

quasar build -m capacitor
otakit upload --release --path src-capacitor/www

Point the CLI at the web build Quasar produced (typically src-capacitor/www). After your first store release with the plugin configured, each release reaches installed devices on the next launch — signed, hash-verified, and CDN-delivered with no per-user or bandwidth metering.

Where to go next

See the setup guide, then automate releases in CI and read staged rollouts.