Quasar: Accessing cordova events

[nshCore]

Im trying out quasar and looks like a promising framework.

Im trying to access cordova device ready event to create an inappbrowser window for oauth login but for the life of me i cant seem to access it, running the app through quasar-play it detects the platform as cordova but device ready never seems to be set.

ripple and simulate from microsoft too dont satisfy this.

Looking at the cordova docs for this https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

i never seem to have access to the cordova object

Am i overlooking something simple? I think something like https://github.com/kartsims/vue-cordova is doing and adding cordova into a global object within vue would make this alot easier, im going to hack around start.js to see if this can be implemented but in the mean time if anyone can point me in the right direction of adding the 'deviceready' event would be much appreciated.

[rstoenescu]

Hi,

// main.js
Quasar.start(() => {
   // cordova's device ready has been triggered already here,
   // where Vue gets instantiated on #app
})

cordova as a global is supplied by default. I will do a patch and inject cordova global into Vue's prototype so you can use it like this.$cordova too if it would make more sense.

What platform are you running cordova on? Android, iOS or Windows Platform?

[nshCore]

im on ubuntu using the android platform, android emulator doesnt seem to boot quasar as it cant find file://some_asset

I did think that as Vue was passed in as the callback function cordova should instantiated there, is cordova properly started though when using quasar-play?

in App.vue i had at the mounted () function

let ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes')
ref.addEventListener('loadstart', function(event) { alert(event.url); })

expecting to see a alert but none

I think this.$cordova for now is more clear, but looking at how vue-cordova and ng-cordova both provide wrappers around cordova for their respective framework is the best option.

[rstoenescu]

I don't see much value in the wrapper. Take a look at vue-cordova source code for example. Very very basic stuff.

In Quasar you can directly access cordova global. Making a wrapper so that you can type this.$cordova is just extra syntactic sugar with more characters than simply writing cordova.<whatever>.
Will create the simple wrapper though for the plugins (take a look at vue-cordova source code again... very very basic stuff).

Btw, you can use Utils.openURL() instead of loading InAppBrowser cordova plugin. Has same effect.

Can you point me to your repo? I'm interested how you get that assets error.

Thanks.

[nshCore]

I've just done quasar init in a new folder to test the events.

Can you point me to where cordova is made global in quasar? is it the start callback?

Can you provide a snippet of accessing the 'deviceready' callback

Thanks!!!

[rstoenescu]

App starts with Quasar.start() which injects cordova.js (supplied by Cordova's assets folder) into DOM and listens for deviceready event. Then calls the callback supplied, which also instantiates Vue into <div id="app">. As a result, all Vue components in your app already have the deviceready event triggered by the time they get mounted. No need to check for deviceready in order to use cordova's global.

So in other words:

// Quasar.start(callback)
// --> when Quasar calls `callback` it ensures deviceready has been previously triggered

Quasar.start(() => {
   // loaded cordova,
   // deviceready has been triggered
   new Vue({el: '#q-app', ......})
})

https://github.com/quasarframework/quasar/blob/v0.13/src/start.js

Injecting cordova.js creates the global cordova object on its own.

[nshCore]

Just built you latest push and can successfully access this.$cordova

Great support!!