vue-cordova-webpack - use cordova plugins functions

[Aden23q]

Hi,

I’m using vue-cordova-webpack (https://github.com/OnsenUI/vue-cordova-webpack).
Does anyone know how to use cordova plugins from <script></script> tag in .vue file, e.g.

cordova.InAppBrowser.open from https://github.com/apache/cordova-plugin-inappbrowser

or

window.plugins.socialsharing.share(); from https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin

?

I have found this, but I’m not sure how whether it is the right way when using onsen and vue.js and I don’t know where to find ons object.

Thanks!

[Fran Diox]

@Aden23q Cordova adds its functionality to the window object, which is globally available and can be accessed from Vue components as well. ons.ready is only a way to wait for deviceready event to ensure that Cordova is fully loaded, but you can also do the sasme with document.addEventListener('deviceready', ...). The ons object is available in Vue components as this.$ons, as explained in the docs :+1:

[Aden23q]

great answer, thank you very much.
Regards!

[Aden23q]

Hi @Fran-Diox , I noticed that my code for cordova is not working.
I’m using this plugin.

I have created a share() method that is called when clicking a <v-ons-icon></v-ons-icon> icon.
Here are some tests I did:

share() {
        this.$ons.ready(function () {
          window.plugins.socialsharing.share(
                  'message', 
                  'subject',
                  'image'
                  );
        });
      },

share() {
        document.addEventListener('deviceready', function () {
          window.plugins.socialsharing.share(
                  'message', 
                  'subject',
                  'image'
                  );
        });
      },

share() {
          window.plugins.socialsharing.share(
                  'message', 
                  'subject',
                  'image'
                  );
      },

but no luck.
It does not work on the phone.

What am I doing wrong?

Thanks