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 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
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)
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:
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.
@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
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
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>
@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.
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/')
...
)
Will you provide a link to a github of your project so other people can help you with this?
It’s best if the github is a “minimal reproducible example” which means no extra information/data besides exactly what you’re trying to do and what the problem is with the plugin
Start a new topic on this with logs-- it might be a Cordova issue (or the plugin) rather than F7
I do not believe the issue is with F7, I believe it’s with Cordova or Android config.
I think if I create a new project it might work, but I have many plugins that I wouldn’t want to lose and reinstall, it’s a hassle.
The error I’m getting is
BUILD FAILED in 4s
35 actionable tasks: 33 executed, 2 up-to-date
/Users/panmoh/Documents/mobile-app/platforms/android/gradlew: Command failed with exit code 1 Error output:
Note: /Users/adria/Documents/mobile-app/platforms/android/CordovaLib/src/org/apache/cordova/engine/SystemCookieManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
D8: Program type already present: com.google.zxing.BarcodeFormat
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ‘:app:transformDexArchiveWithExternalLibsDexMergerForDebug’.