Cordova allows you to wrap your Quasar App into a native mobile App. In the following examples we’ll be using Quasar CLI to manage this. After the initial setup you will need to wrap each project individually and add the desired platforms (Android and/or iOS).
There are some initial steps you need to take before you can wrap your apps using Cordova:
First install Cordova globally on your machine:$ npm install -g cordova
Update your ~/.bashrc file to contain the correct paths to your installation of Android Studio:export ANDROID_HOME="$HOME/Android/Sdk"PATH=$PATH:$ANDROID_HOME/tools; PATH=$PATH:$ANDROID_HOME/platform-tools
Start Android studio by changing into the folder you installed it in and run
./studio.sh. Next step is to install the individual SDKs:
Open the “Configure” menu at the bottom of the window:
Select the desired SDKs. As per May 2017 Cordova supports 4.4 and up and click on “Apply” to install the SDKs.
To transform a Quasar project into a working Cordova app, you need to wrap it initially. The following steps explain how to wrap your app and add the desired platforms.
Run the following command to wrap your app in your project folder:
This command generates a subfolder inside your App named
/cordova. It contains the assets of a Cordova project mapped to your Quasar App’s production ready code (
It will ask you if you want to install the Crosswalk plugin which applies to Android apps only. Crosswalk ensures that your App will have the same browser runtime (which is also the latest and greatest) on all Android platforms. The downside is that it will also make your native App package file bigger. Read more here about Crosswalk.
It is highly recommended that you opt for the Crosswalk plugin to be installed. Otherwise your App might experience unexpected behavior on older platforms.
If however you don’t wrap your App with Crosswalk from the CLI you can add it later with:
NOTE for Windows Developers
It is possible that you get
Error: EPERM: operation not permitted, symlink '..\dist', in which case you need to add privileges for your user to be able to create symlinks. Read here.
Another work-around and a quick solution is creating the symlink manually (after running
quasar wrap cordova). To do so, start a command line as Administrator, change directory (
cd) to the newly created
mklink www ..\dist\.
Change into the
/cordovasubfolder in your Quasar project before you run any
After making the wrapper and making sure you have the platform’s SDK installed on your machine, you need to add at least a platform to your App, like this:
To verify if you fulfill all requirements run the follow command:
On some newer Debian-based operating systems you might face a very persistent problem when running
cordova requiremets. Please see the “Android SDK not found” after installation section for assistance.
To run your wrapped app on an ios simulator, you need to be on running a Mac OS for iOS and excecute the following command:
In case you run into the bug described here:
Cannot read property ‘replace’ of undefined
Please follow the steps here: phonegap/ios-sim#210.
For other cordova related bugs please try to look into the official Cordova documentation first.
There are lots of Cordova plugins available which enables to you access the Camera, NFC, Battery Status, Contacts, Geolocation, Device motion and orientation and many more.
Check out Cordova’s website. Example for Battery Status: here.
Use Google Chrome’s emulator from Developer Tools. It’s a fantastic tool. You can select which device to emulate, but keep in mind that it’s an emulator and not the real deal.
When building an iOS app with Cordova and you want to disable the rubber band effect (https://www.youtube.com/watch?v=UjuNGpU29Mk), add this to your
config.xml from the
cordova wrapper folder inside your project:
If you are debugging Android Apps, you can use Google Chrome Remote Debugging through a USB cable attached to your Android phone. Combine this with Quasar Play App and you get an excellent debugging environment.
This way you have Chrome Dev Tools directly for your App running on the phone. Inspect elements, check console output, and so on and so forth.
Some newer Debian-based OS (e.g. ubuntu, elementary OS) might leave you with a
Android SDK not found. after you installed and (correctly) configured the environment. The output might look similar to this:
This could have two different reasons: Usually the paths aren’t configured correctly. The first step is to verify if your paths are set correctly. This can be done by running the following commands:
The expected output should be a path similar to this
$HOME/Android/Sdk. After this run:
To ensure the folder contains the SDK. The expected output should contain folders like ‘tools’, ‘sources’, ‘platform-tools’, etc.
The output should contain each one entry for the Android SDK ‘tools’-folder and ‘platform-tools’-tools. This could look like this:
If you ensured your paths are set correctly and still get the error on
cordova requirementsyou can try the following fix: Replacing the Android Studio ‘tools’ folder manually
You may bump into
?????? no permissions problem when trying to run your App directly on an Android phone/tablet.
Here’s how you fix this:
The content for
adb devices should discover your device.