Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Webpack - @quasar/app-webpack
Capacitor Build Commands

Developing

$ quasar dev -m capacitor -T [ios|android]

# ..or the longer form:
$ quasar dev --mode capacitor --target [ios|android]

It will open the IDE (Android Studio / Xcode) and from there you can manually select the emulator (or multiple ones simultaneously!) and install the dev app on it/them. You can also run the dev app on a real mobile/tablet device.

WARNING

In Android Studio, you will be greeted with a message recommending to upgrade the Gradle version. DO NOT UPGRADE GRADLE as it will break the Capacitor project. Same goes for any other requested upgrades.

Gradle upgrade

If you encounter any IDE errors then click on File > Invalidate caches and restart.

Gradle upgrade

In order for you to be able to develop on a device emulator or directly on a phone (with Hot Module Reload included), Quasar CLI follows these steps:

  1. Detects your machine’s external IP address. If there are multiple such IPs detected, then it asks you to choose one. If you’ll be using a mobile phone to develop then choose the IP address of your machine that’s pingable from the phone/tablet.
  2. It starts up a development server on your machine.
  3. It tells Capacitor to use the IP previously detected. This allows the app to connect to the development server.
  4. It uses the Capacitor CLI to update all of your plugins.
  5. Finally, it opens your native IDE. Run your app here, and it will automatically connect to the dev server.

WARNING

If developing on a mobile phone/tablet, it is very important that the external IP address of your build machine is accessible from the phone/tablet, otherwise you’ll get a development app with white screen only. Also check your machine’s firewall to allow connections to the development chosen port.

Building for Production

$ quasar build -m capacitor -T [ios|android]

# ..or the longer form:
$ quasar build --mode capacitor --target [ios|android]
  • These commands parse and build your /src folder then overwrite /src-capacitor/www then use the Gradle/xcodebuild to generate the final assets that go into a phone/tablet.

  • Built packages will be located in /dist/capacitor unless configured otherwise.

  • If you wish to skip the Gradle/xcodebuild step and only fill /src-capacitor/www folder:

$ quasar build -m capacitor -T [ios|android] --skip-pkg
  • Should you wish to manually build the final assets using the IDE (Android Studio / Xcode) instead of doing a terminal build, then:
$ quasar build -m capacitor -T [ios|android] --ide

WARNING

In Android Studio, you will be greeted with a message recommending to upgrade the Gradle version. DO NOT UPGRADE GRADLE as it will break the Capacitor project. Same goes for any other requested upgrades.

Gradle upgrade

If you encounter any IDE errors then click on File > Invalidate caches and restart.

Gradle upgrade

If you want a production build with debugging enabled for the UI code:

$ quasar build -m capacitor -T [ios|android] -d

# ..or the longer form
$ quasar build -m capacitor -T [ios|android] --debug