Need to trigger "deviceready" in the context of VueJS/OnsenUI and make use of ES6. . .

[humblecoder]

TOOLS: VueJS/PouchDB (backed by ‘cordova-sqlite-storage’ plugin)

I’m currently using the OnsenUI/VueJS combo. I need to make use of PouchDB with a custom sqlite adapter, however, in order to do so, I need to be able to successfully bind the plugin requirements on “deviceready”. I’ve seen the documentation (http://tinyurl.com/yb57edxd) however, the VueJS + Webpack loader (and my use of ES6) precludes a direct copy of this example.

My goal is to manage DB initialization, etc. in an external “database.js” file. However I’m not sure how to go about it (e.g. add another entry point to WebPack and export the file then “onload” the init?). Obviously I need to better familiarize myself with the ins and outs of WebPack (which I’ll do this weekend), but in the interim, if anyone has any suggestions, I’m all ears.

NOTE: It’s possible I’m asking the wrong question. If I should have simply asked “How can I load and centralize control of PouchDB with custom adapter in VueJS?”, I do apologize.

Thanks

[misterjunio]

@humblecoder a quick search rendered two community plugins here and here for binding PouchDB to Vue. If I understood correctly this may be what you need.

[humblecoder]

@misterjunio:

First of all, I want to thank this community for the speedy replies. Amazing!

That said, I’m not having trouble with PouchDB itself. It works fine if I want to use “webSQL”. However, I need to load the “cordova-sqlite-storage” plugin via “deviceready” and make use of an SQLite-backed DB. Whenever I attempt to change the “adapter”, I receive an error stating that I haven’t bound the proper plugin, but I followed the instructions. So I’m assuming it’s related to “deviceready”. To restate, I can’t seem to figure out to fulfill all of the following requirements:

• External JS file
• Use ES6 (compiled via Webpack)
• Bind the “cordova-sqlite-storage” plugin on “deviceready”

I’ll keep looking – in the meantime, feel free to update/pontificate/criticize at will. :laughing:

[humblecoder]

@misterjunio so, after thinking about my approach, I’ve decided that I want to simply maintain an instance of PouchDB in my vuex “store”. As mentioned previously, using PouchDB directly (via webSQL) works fine. However, I want to use the sqlite plugin and it requires being loaded “ondeviceready”. So, what I need now is a mechanism (e.g. VueJS “mount” event) whereby I can initialize the loading of the plugin, and go back and add it to the “store”.

I’ve been trying to bind to ‘deviceready’ in the VueJS “mounted” event. While “mounted” is obviously being fired, I can’t seem to determine deviceready-ness. Full disclosure, I’ve only tested it in the browser. Perhaps I need to test it in the iOS emulator. However, I still need it testable in the browser. Thoughts?

UPDATE: ons.ready() doesn’t seem to fire.
UPDATE 2: this.$ons.ready() fires in the context of “mount”. Still having trouble loading the cordova sqlite module.

[misterjunio]

@humblecoder I don’t think you can test Cordova plugins such as that one in the browser. I tried on a device and ondeviceready fired as it should have, I just placed the listener in my main.js so maybe you can try to load sqlite from there.