How to setup Cordova on the Quasar Framework?

After successfully developing my first Quasar V1 project with Cordova (and Vue), I decided to post all the commands and problems that made me lose a tremendous amount of time.

Make sure you bookmark this page as you will use it a lot!

Let’s start with the most important commands:

1) Create a new Quasar V1 project with:

quasar new store 

2) Add cordova to your Quasar project with:

quasar mode add cordova

3)To switch to your cordova project:

cd src-cordova

You should now found yourself in:

C:\laragon\www\your-project\src-cordova

4)Add an Android platform to your Cordova project:

cordova platform add android

5)Add a splash screen plugin:

cordova plugin add cordova-plugin-splashscreen

6)Install very important plugins:

cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-dialogs
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-geolocation
cordova plugin add cordova-plugin-media-capture
cordova plugin add cordova-plugin-request-location-accuracy
cordova plugin add cordova-plugin-splashscreen
cordova plugin add cordova-plugin-whitelist
cordova plugin add cordova-plugin-wkwebview-engine
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-inappbrowser

7)Install Vuelidate

npm install vuelidate --save

quasar new boot vuelidate

The boot command will generate a new file in:

yourproject/src/boot

Make sure you go to your quasar.conf.js

and have vuelidate here:

boot: [
'i18n',
'axios',
'vuelidate', <-----
'vue2-google-maps'
],

Go to the boot folder and create a file called vuelidate.js and add this code in it:

import Vuelidate from 'vuelidate';

export default async ({ app, Vue }) => {
Vue.use(Vuelidate);
};

8) 3 super important commands:

The below command will generate a web version of your app

quasar dev

This command will package your app

quasar build -m cordova -T android

After packaging your app, make sure your Android phone is plugged in, run the below command to send the app to your phone

cordova run android

I prefer to upload a proper APK to my phone to use all the Cordova features.

Problems you may encounter with vuelidate, here is an example on how to use it with a basic login page:

Did you notice the local image? That's how you can linked them to your project locally, drop them into src/assets/

9)Routing from an action.js

Let's say you create multiple modules and wish to send the user to a page from one action, you will have to use this:

export function resetAll (context) {
let vm = this;
vm.$router.push({ path: '/' });
}

10)Dispatching to any modules from anywhere in your app.

This is a problem that caused me a lot of troubles, here is the code:

this.$store.dispatch('common/clearCounts', null, {
root: true
});

In order to dispatch to a module, you have to add the path of the module, then 'null' if you have no parameters to send and finally { root: true }

11)Where to put all your alerts?

I personally like to have all my warnings and alerts in 1 single module here:

context.dispatch('alerts/alertRed', 'Our server is not responding', { root: true });

12)Setting up and accessing your local storage

Add an item to your localstorage

localStorage.setItem('accessToken', myItem);

Retrieve an item from your local storage

localStorage.getItem('accessToken');

Delete all the local storage from Mutation:

window.localStorage.clear();

13)When a user uninstall your app, the local storage is still there. This can be problematic if you use certain details that need to be reset on new install.

This is how you do it, go to your src-cordova/config.xml and add this code:

As you can see, you must add:

xmlns:android="http://schemas.android.com/apk/res/android"

And then also this:

I will keep adding more commands and tips as I continue working on different Quasar & Cordova projects.