Building an Android App with Vue Js

In this post we’re going to go over building an Android App with Vue Js. In my case I was using Vue Js to quickly build a prototype, and the original thought was to build seperate apps in swift and java respectivly for andriod and IOS use. When I started looking into the possibilities, I saw I no longer had to rewrite the whole app for ios/android but instead I could use a library to make one codebase run accross multiple environments, in this case I was using Apache COrdova. Now lets get started creating a new vue js project for android.

Step 1: Install vue cli and cordova and add cordova to your new app

$ npm install -g @vue/cli
$ vue create my-app
$ cd my-app
$ npm install -g cordova 
$ vue add cordova

Step 2: Check everything works in your browser, this will show the default Vue splash screen:

$ npm run cordova-serve-browser

Step 3: Build the android APK (Make sure you run with sudo or admin privaladges, I had issues running as normal user on windows):

$ npm run cordova-build-android

Step 4: Copy the APK file to your device, the APK will sit in the following directory __YOURCODEBASE__\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk. The simplest way to test would be to upload the APK to a webserver and download it onto your device, once downloaded click on the APK on your Android device and run the simple install. Once installed you can open your Vue JS app in android…