Configuring Capacitor

We’ll be using Quasar CLI to develop and build a Mobile App. The difference between building a SPA, PWA, Electron App or a Mobile App is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.

There are two configuration files of great importance to your mobile apps. We’ll go over each one.

capacitor.config.json

The most important config file for your mobile app is /src-capacitor/capacitor.config.json. The /src-capacitor folder is a Capacitor project, so please refer to Capacitor documentation in order to understand what each file from there does. But for now, have a few moments to read about capacitor.config.json.

Some properties from this file will get overwritten as we’ll see in next section.

quasar.conf.js

There are two places in /quasar.conf.js where you can configure Quasar specific features for Capacitor.

return {
  capacitor: {
    // requires @quasar/app v1.3.0+
    hideSplashscreen: false // disables auto-hiding the Splashscreen by Quasar CLI
  }
}

And you can also configure:

return {
  framework: {
    config: {
      capacitor: {
        iosStatusBarPadding: true/false, // add the dynamic top padding on iOS mobile devices
      }
    }
  }
}