Build an Android App with Quasar Framework

Use your Vue.js knowledge to build a great hybrid Android app.

This article will not cover Vue.js directly, but will be exploring the popular Quasar Framework which is powered by Vue. And it won’t actually be covering Quasar as a whole, just the Cordova wrapper built into it, so it’s best if you are familiar with Quasar already.

Housekeeping

This article is part of a series.

Configuring Cordova

I advise that you read this article first if you haven’t already. If you do not have the Android tools and Cordova installed properly, the rest of this page is not going to work.

Build Android App (this article)

From there, this article describes how to use a Quasar project and Cordova to build the necessary APK (Android Package Kit) file.

Publish to Google Play Store

Lastly, you will learn how to create a Play Store Developer account and publish your newly created Android app to the Play Store for everyone to download.

Motivation

I had been experimenting with the Quasar framework for quite some time, but had yet to work with the Cordova wrapper. This is what I learned.

Note: I am developing on a Linux-based system and will be using commands for such. Other systems will probably be different.

Build Android App

This tutorial is not project specific, so if you already have a Quasar project ready to use, feel free to use it. Otherwise create a basic project with:

$ quasar init default android-app
$ cd android-app
$ yarn install     # or npm install

First, let’s make sure we have a fresh build to work with:

$ quasar build

Let’s wrap this build with Cordova:

$ quasar wrap cordova
$ cd cordova

Then you can add Android to the list of platforms:

$ cordova platform add android

Confirm that Cordova is still configured properly:

$ cordova requirements

If this fails, please consult the Configuring Cordova tutorial to address the errors.

Once this all checks out you can build the Android APK file:

$ cordova build --release

The last line of the output provides you with the path to your newly built APK file. Technically, you are now finished. That APK file is all you need in order to install the app on an Android device (with a slight workaround).

Take note that as you develop the Quasar project further, you will still need to run quasar build to update the project files and then you can run cordova build to reflect those changes in the APK file.

Publish to Google Play Store

The first step to publishing on the Google Play Store is to create a Play Store Developer account. Keep in mind that it costs $25 to register.

If you’re serious about publishing now, take a look at Publish to Google Play Store of this series. If not, come back when you’re ready.

Troubleshooting

I can’t image this is the official stance, but whenever I ran into an issue I would wipe the slate clean and start over. That’s not as bad as it sounds. Since all the actual Android files are managed by Cordova we can execute two commands to start over:

$ cordova platform remove android
$ cordova platform add android

That’s it! The Quasar project files remain the same, but the Android files have been recreated. Now back to work.