Preparation for Capacitor App

Before we dive in to the actual development, we need to do some preparation work.

1. Installation

Android setup

  • You will need to install Android Studio and the Android platform SDK on your machine. You can download the Android Studio here and follow these installation steps afterwards.

  • Make sure that after you install the Android SDK you then accept its licenses. Open the terminal and go to the folder where the SDK was installed, in tools/bin and call sdkmanager --licenses.


The environmental variable ANDROID_HOME has been deprecated and replaced with ANDROID_SDK_ROOT. Depending on your version of Android Studio you may need one or the other. It doesn’t hurt to have both set.

  • Add Android installation to your path:

Unix (macOS, linux)

export ANDROID_HOME="$HOME/Android/Sdk"
export ANDROID_SDK_ROOT="$HOME/Android/Sdk"

Please note that sometimes the /Android/Sdk folder is added inside /Library/ inside your user folder. Check your user folder and if the /Android/ folder is only inside /Library/ do: export ANDROID_SDK_ROOT="$HOME/Library/Android/Sdk" or export ANDROID_HOME="$HOME/Library/Android/Sdk" instead.


setx ANDROID_HOME "%USERPROFILE%\AppData\Local\Android\Sdk"
setx ANDROID_SDK_ROOT "%USERPROFILE%\AppData\Local\Android\Sdk"
setx path "%path%;%ANDROID_SDK_ROOT%\tools;%ANDROID_SDK_ROOT%\platform-tools"
  • Start Android studio (check the executable in the folder that you installed it in). Next step is to install the individual SDKs:

  • Open the “Configure” menu at the bottom of the window:

  • Select the desired SDKs and click on “Apply” to install the SDKs.

iOS setup

You will need a macOS with Xcode installed. After you’ve installed it, open Xcode in order to get the license prompt. Accept the license, then you can close it.

2. Add Capacitor Quasar Mode

In order to develop/build a Mobile app, we need to add the Capacitor mode to our Quasar project. This will use the Capacitor CLI to generate a Capacitor project in /src-capacitor folder.

$ quasar mode add capacitor

3. Start Developing

To start a dev server with HMR, run the command below:

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

Once the dev server is ready, your IDE will open (Android Studio or 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 connected mobile/tablet device.


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