Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert project to CLI with Vite
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
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 Vite - @quasar/app-vite
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.config file

There are two places in the /quasar.config file where you can configure Quasar specific features for Capacitor.

return {
  capacitor: {
    // (Optional!)
    hideSplashscreen: false, // disables auto-hiding the Splashscreen by Quasar CLI

    // (Optional!)
    capacitorCliPreparationParams: [ 'sync', ctx.targetName ],

    // (Optional) If not present, will look for package.json > name
    appName: '...', // string
    // (Optional) If not present, will look for package.json > version
    version: '...', // string
    // (Optional) If not present, will look for package.json > description
    description: '...', // string
  }
}

And you can also configure:

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

Finally, you can also disable or configure the back button hook (used for Dialogs):

return {
  framework: {
    config: {
      capacitor: {
        // Quasar handles app exit on mobile phone back button.
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // On the other hand, the following completely
        // disables Quasar's back button management.
        backButton: true/false
      }
    }
  }
}

Should you want to tamper with the Vite config for UI in /src:

/quasar.config file

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.capacitor) {
          // do something with ViteConf
        }
      }
    }
  }
}