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="[email protected]" 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.
Recommended Courses:
☞ Learn by Doing: Vue JS 2.0 the Right Way
☞ Vue.js 2 Essentials: Build Your First Vue App
☞ Getting started with Vuejs for development
☞ Horizontal Feed Component with Sass and VueJs 2
☞ Learn Vue 1 JS introduction to simple reactive JavaScript
Suggest:
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from Scratch - Full Course for Beginners