[SOLVED] Cordova Plugins with Framework7 + Vue?


#1

Hi Framework7 Community!

Has anyone successfully integrated “native” Cordova plugins with framework7 in a Vuejs application? I haven’t been able to find a canonical example of exactly how to setup Framework7 with Vuejs + a Cordova plugin.

I’ve attempted various techniques to get a Cordova plugin working with this starter template (it’s Vue-based, similar to kitchen-sink example): https://github.com/AppointmentGuru/webpack-mobile-f7

The cordova plugin I’m attempting to integrate: https://www.npmjs.com/package/cordova-plugin-barcodescanner

$ cordova plugin add cordova-plugin-barcodescanner

And in one of the components I’ve tried to invoke this method w/o success:

   cordova.plugins.barcodeScanner.scan(
      function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
      },
      function (error) {
          alert("Scanning failed: " + error);
      }
   );

Thanks for any help & insight-- Framework7 is an absolutely incredible-looking framework!

Other posts & troubleshooting:


Few questions for working with Cordova Plugins in a f7 v2 application
#2

I have created numerous F7-Vue cordova apps and never experience problems with cordova plugins. Use it like always, make sure you have included cordova.js in your index.html and call cordova APIs after deviceready event


#3

Is there a working example repo available anywhere specifically w/ Vue & Framework7?

I’ve got cordova.js in my index.html template from the build process (via platforms/ios/CordovaLib) & it’s being fetched from index.html correctly (cordova is defined)

In main.js (following this template: https://github.com/AppointmentGuru/webpack-mobile-f7) this deviceready fires correctly, however, cordova.plugins is undefined.

document.addEventListener('deviceready', () => {
  alert('Device ready event fired!');
   alert(cordova.plugins); // Undefined
});

Is there a better (correct) way to access plugins after deviceready? All the docs I’ve seen are to access via cordova.plugins after deviceready but so far no luck

Unless I’m misunderstanding something profoundly, my understanding is that the way to use a plugin like barcodescanner (using cordova plugin add cordova-plugin-barcodescanner via https://www.npmjs.com/package/cordova-plugin-barcodescanner) and use it after deviceready in a vue-component like so:


      window.cordova.plugins.barcodeScanner.scan(
        function (result) {
            console.log('Result: ', result)
            alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
        },
        function (error) {
            alert("Scanning failed: " + error);
        }
      );

There must be some mis-understanding here since I lots of folks I’ve seen across forums seem to have gotten stuck on this issue.

Following the Cordova plugin docs onf Clobbers, and on line 39 of the barcodeScanner’s plugin.xml it looks like it should be exposed under cordova.plugins.barcodeScanner


#4

Also here’s a minimal example repo (trying to to build for ios): https://github.com/bingobongotmp/framework7cordovaplugin

  1. cordova.js to www/static on build: https://github.com/bingobongotmp/framework7cordovaplugin/blob/master/build/build.js#L27

  2. Base template index.html has script src to static/cordova.js:
    https://github.com/bingobongotmp/framework7cordovaplugin/blob/master/index.html#L13

  3. In main.js waiting for deviceready event, it fires successfully but cordova.plugins is undefined:
    https://github.com/bingobongotmp/framework7cordovaplugin/blob/master/src/main.js#L33

Plugin added with cordova plugin add cordova-plugin-barcodescanner

Ran following from root of project:

npm i -g cordova # if not already

npm i -g ios-deploy # if not already

npm i

cordova platform add ios

# Add team/certificate in ios

npm run build && cordova build

# Open in xcode, load on device, deviceready fires but cordova.plugins undefined

@nolimits4web Totally agree this is a very standard task (use a plugin) but there must be some important piece of config or step missing.


#5

Will have more time tomorrow to check your repo with issue


#6

how about , only basic cordova + plugin barcode ? without vue or anything else ?

running well ?


#7

@edoofx – yep, as others have alluded to cordova plugins working correctly.

The specific use case here is to successfully use cordova barcode scanner with Framework7 + Vue

It could certainly be an issue with this starter template, but as of now haven’t found any Framework7 starters that work with Cordova plugins like barcode scanner


Codova plugins problems with framework7
#8

Ok, checked, the issue is in your template you are using. You are referencing ./static/cordova.js but Cordova puts automatically cordova.js in the root of www folder, so you have to use this one instead of what you use:

<script src="cordova.js"></script>

Also, the template you are using uses very very outdated version of Framework7 (it is 1.4.x) while F7 is already on v2 a while ago


#9

Got it— I put that script tag & modified the build script bc Cordova was undefined & didn’t appear to generate it, must have mis-understood.

I think it’d be immensely valuable to make a super simple f7 repo w/ vue w/ a button & on press it’ll invoke barcode scanner scan method.

Do you recommend/vouch for this starter?m from the main site?


#10

Yes, this is official template


#11

Cool-- I’ll post a starter repo on this thread once I get a basic barcode scanner example working & @ you if any issues

Thank you for all your help (and also work on this project & templates!)


#12

@nolimits4web & anyone else working w/ outdated templates

Working barcode scanner + f7 + vue:

Lessons learned for anyone else who has Cordova plugin issues w/ Vue + Framework7 wrapped in Cordova:

  1. Make sure index.html includes cordova.js (should be part of build process or cordova hook

  2. Wait for ‘deviceready’ event

  3. Your plugin may require additional permissions/configuration in config.xml depending on which version of the mobile OS you’re targeting


#13

After hours of trying to hunt down why my app was exiting the application when the Android back button was pressed, this was the answer that led me to the solution. For those in a similar situation:

I am using this template:

If building for Cordova/Phonegap, make sure to uncomment the cordova.js reference in [projectroot]/index.html.

<body>
  <div id="app"></div>

  <!-- Cordova -->
  <!--
  <script src="cordova.js"></script>
  -->
  <!-- built script files will be auto injected -->
</body>

becomes this:

<body>
  <div id="app"></div>

  <!-- Cordova -->
  <script src="cordova.js"></script>

  <!-- built script files will be auto injected -->
</body>

Now everything is working as it should!


#14

Thanks @valg20172018 for these nice follows. I am actually experimenting an issue with cordova plugins too. I am using cordova-template-framework7-vue-webpack (
https://github.com/caiobiodere/cordova-template-framework7-vue-webpack/) and I am trying to add cordova-plugin-admob-free.

I try to figured out how to fix this, but I didn’t find a solution. This is my first project with cordova, vueJS and WebPack…


#15

@nolimits4web
I’ll try to do the same again.
scan: function() {
cordova.plugins.barcodeScanner.scan(
function (result) {
this.$f7router.navigate(/path/) //don’t work
},
function (error) {
alert(“Scanning failed: " + error);
}
);
},
but <f7-link @click=”$f7router.navigate(’/path/’)"> //could work properly
and window.location.href=""//Success
Thank you for your answer.


#16

you are using THIS, as referenc to the app. but THIS references to your scanner function, not your app. a solution would be, store the app instance before the functiona and then use it.
Eg:

let vm = this
cordova.plugins.barcodeScanner.scan(
...
vm.$f7router.navigate('/path/')
...
)