Building Android App using Vuejs and Vuetify powered by Capacitor

Capacitor bundles existing web app to create an Android app.

Vuejs is one of the top & trending JavaScript front-end frameworks. I personally loved Vuejs due to its relatively easier learning curve. Vuetify is a material design component with a large collection of components that you would need to develop a web app or a mobile app.

This article is not a tutorial for Vuejs or Vuetify but a demonstration on how to use the web technologies i.e. Vue and Vuetify to build an Android app. The goal is to build an application for inventory management using a local storage to store the data (Github Source Code, Website). You will have a final .apk file at the end of this tutorial and if you have an Android mobile phone you can test the application and share your feedback.

Unless you are a complete beginner to front-end frameworks or developing a web app you will be able to follow the demo. Here is the list of requirements or Prerequisites for the demo.

You can install NODE and NPM using NVM then install the Vue packages using npm.

nvm install v10.16.2
npm install -g @vue/cli @vue/cli-init

Additionally you need to install Java JDK and Android Studio. Then set your environment variables for the Android SDK and Java JDK. If you are using a Linux machine the you can add the following lines to your .bashrc file. Make sure the file paths are correct with respect to your machine.

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export PATH=$PATH:$JAVA_HOME/bin
export ANDROID_SDK_ROOT=/root/Android/Sdk/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/platform_tools

Inventory management

Now that all is setup we can get started with the inventory application. If you are not interested with the inventory application you can skip cloning the project from Github repository. Instead you can only use the default project offered by the Vue cli service.

vue create PROJECT_NAME
cd PROJECT_NAME
vue add vuetify
npm run serve
npm run build

Now, we have a working Vuejs project with Vuetify enabled as a plugin. Or alternatively you may clone the inventory app from the Github repository as follows.

git clone https://github.com/Fthi-S3074641/shuq-bara
cd shuq-bara
npm install
npm run serve
npm run build

Inside the project folder, either the default one from Vue cli or the inventory app from Github, run npm install to get the Capacitor packages that will allow any web app project to be built as hybrid application for Android, IOS or even desktop.

npm install --save @capacitor/core @capacitor/cli

Before proceeding I would like to appreciate the great work the Capacitor team has put in since in my opinion Capacitor has come with the potential to change the traditional ways of developing mobile apps. I am not comparing it to Cordova which I accept as the go to framework tool for building JavaScript based mobile apps. But, I have to admit Capacitor is way simpler to use since you can have an apk bundle in no time even from an existing web application. I haven’t tested any of the Capacitor plugins that allow access to the native features of the smart phones so I can’t have a say on that.

After installing the Capacitor npm packages run the following final steps to create an android project that will be later imported toAndroid Studio.

npx cap init 
// here you specify app name: shuqbara
// and package name: org.team.shuqbara
npx cap add android
// Make sure to rename 'www' into 'dist' inside capacitor.config.js
// you may choose ios instead of android
// This will create an android project
npm run build
npx cap copy

The last command copies the build assets from the dist directory into the android project folder created in the previous step. The beauty of Capacitor shines here; every time you build your web app project and run the capacitor copy command your android studio project updates its indexes and keeps the android app project up-to-date with the web app project. This allows you to work with a web app when in development mode and switch to your android app when in production mode.

Conclusion

At last, you can open your Android Studio and import the android project which is located inside your initial project folder (i.e. shuq-bara). Connect an android device or start up an emulator and test the app from android studio. The screenshot presented above is the welcome page of the inventory application. You can also get the apk file from using the web links below.

Source code: https://github.com/Fthi-S3074641/shuq-bara

LinkedIn: https://www.linkedin.com/pulse/building-android-app-using-vuejs-vuetify-powered-capacitor-abadi

APK file: https://github.com/Fthi-S3074641/shuq-bara/blob/master/shuqbara.apk

Website: https://www.shuqbara.com