Ionic_vue + capacitor + native plugin = does not work (

Hi All!

npm install cordova-plugin-device --save
npm install @ionic-native/device --save

main.js:

import { Device } from ‘@ionic-native/device/ngx’;
Vue.use(Device);

component.vue:

console.log(Device) =>
Device()​
annotations: Array [ {} ]
​length: 0
​name: “Device”
platforms: Array(5) [ “Android”, “Browser”, “iOS”, … ]
plugin: “cordova-plugin-device”
pluginName: “Device”
pluginRef: “device”
prototype: Object { constructor: Device(), cordova: Getter & Setter, model: Getter & Setter, … }
repo: “https://github.com/apache/cordova-plugin-device
: IonicNativePlugin()

BUT: there is no neither window.device, nor this.device

If I do
const device = new Device();
console.log(device) => all properties are nulls, device.platform etc

I tried to use few Ionic native plugins this way with VueJS, but no luck (
But some Capacitor plugins are works, e.g. Modals

Please help.

I’m experiencing a similar problem trying to get the Ionic Native Barcode Scanner to work inside my Ionic Vue project with Capacitor.

The Capacitor docs show how to use native plugins with Ionic Angular, but can’t find any examples or instructions on making them work with Ionic Vue with Capacitor.

When I try to import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'; , I get Can't resolve '@angular/core' in '/node_modules/@ionic-native/barcode-scanner/ngx'.

But when I import { BarcodeScanner } from '@ionic-native/barcode-scanner'; , I get cordova_not_available.

Do you need to use something like https://www.npmjs.com/package/vue-cordova-plugin so that cordova is available? Or is there a way to use @ionic-native/barcode-scanner? Or should I use phonegap-plugin-barcodescanner directly instead? :thinking:

@aaronksaunders do you have any suggestions on how to use Cordova plugins inside Ionic 4 + Vue project?

PS thanks for your previous help sharing your Vue examples :+1:

npm install phonegap-plugin-barcodescanner

then follow instructions from plugin website…

see… https://github.com/aaronksaunders/capacitor-vue-ionicv4-app, look in Home.vue

Thanks for the reply @aaronksaunders! When I try calling cordova.plugins.barcodeScanner.scan, I get cordova is not defined.

Looking through capacitor-vue-ionicv4-app, I don’t see any place where you’re importing phonegap-plugin-barcodescanner besides being a dependency in package.json?

  • it is installed through the npm install command

I’m having a similar problem running capacitor-vue-ionicv4-app in the browser. The Capacitor plugin works fine, but the Cordova plugin does not.

sorry… for late follow up, did you get this working - it is not going to fine cordova in the web browser, the barcodescanner will only work on device

Thanks for reply @aaronksaunders, I was wondering whether phonegap-plugin-barcodescanner worked in the browser. I was uncertain since their website says:

Supported Platforms

  • Android
  • iOS
  • Windows (Windows/Windows Phone 8.1 and Windows 10)
  • Browser

I’ve been able to get vue-qrcode-reader working in the browser and mobile. However it only supports QR codes and does not handle regular barcodes.

What are my options for barcode scanning in browser and mobile? Is there a Capacitor option?

Hi @dalezak.

I’m in the same situation that you, in my case, also using vue-qrcode-reader, but in documentation says not working in chrome IOS. In your case works? If yes, I will use this.

Thanks.