How to easily build an android app with Vue 2

I’ve been leaning on Vue heavily for my personal projects lately and it has been so much fun to work with.

I built a server-less 2017 Federal Tax Estimator using Quasar Framework and Vue.

See it in the Google Play Store.

Quasar is fairly straight forward. It provides a build system that converts your code both into an electron and cordova app with simple commands. A big hand to Razvan Stoenescu for putting all the effort into making our lives easier.

You start your project with

quasar init <folder name>

You link your static assets by adding them to the static folder and in your index.html file

<link rel="stylesheet" href="statics/materialize.min.css">

Create single-file components in the components folder and add them to your router.js file.

{ path: '/', component: load('<file-name>') },

When you want to run the project in your browser type

quasar dev

When you’re finished run

quasar wrap cordova
quasar wrap electron

Then build your project

quasar build

Electron

Cd into the electron folder. To change the app icon change the electron > icons > icon.icnsicon. Then to build the electron files run

quasar build

You find the built files in the electron > dist folder. For mac, that’s the darwin folder.

Cordova

For cordova, set your app version and name and file name in the cordova > config.xml and add your icon in the root of the cordova folder.

<widget id="io.cordova.yourappname" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<icon src="icon.png" platform="android" width="57" height="57" density="mdpi" />
<description>
Estimate your 2017 Federal Taxes using Standard Deduction and Personal Exemptions.
</description>
<author email="youremail@yourprovider.com" href="http://cordova.io">
Your Name
</author>

cd into the cordova folder and run

cordova build --release android

You can find the apk file in.

cordova > platforms > android > build > outputs > apk > android-arm7-release.apk

Create a google play account (costs one time $25). And fill out the forms upload your apk file and create a youtube demo and screenshots. If you want to sell on the apple store it will be a yearly payment of $100 for a developers license.

If you don’t have android already installed on your computer that’s a bit trickier. I tried with homebrew on my mac but didn’t have much luck. I eventually installed the android studio app and had to find a tools folder and replace the whole tools folder with a a newer version. I will try to make a guide on that in the future.

Quasar was great to work with. Whenever you want to make updates cd into the root project folder and run quasar build then cd into the electron folder and run the command again. Then back up and cd into the cordova folder and run cordova build --release android.

If you like the framework, consider donating to Razvan to support his continued development on the project. He’s donating his time and energy to help make our lives easier. Also feel free to submit new ideas for the framework.