How do I use a Cordova plugin in ionic capacitor with vue.js

Question

I can't figure out how to use this capacitor plugin in my vue.js component. Or any ionic native or cordova plugins.. https://ionicframework.com/docs/native/contacts

I can get capacitor api's to work just fine. https://capacitor.ionicframework.com/docs/apis/device

Any knowledge appreciated!

Answer 1

Here's what ended up working for me:

I viewed the plugins on Ionic's site: https://ionicframework.com/docs/native/in-app-purchase (in my case) and then for the install I ran npm install cordova-plugin-inapppurchase and then ran npm install @ionic-native/in-app-purchase. Then in my Vue JS file I imported the plugin using import { InAppPurchase } from '@ionic-native/in-app-purchase/ngx';

The next part is what tripped me up. On the next line I had to create a new variable to access the referenced plugin. So the next line of code is const iap = new InAppPurchase();

Then you can access the iap variable and use all the documented methods from within your Vue app.

Keep in mind that any testing of Cordova plugins will need to happen on your device.

Hope this helps anyone who was struggling like me!

Answer 2

According to the documentation here https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins you should be able to do

npm i cordova-plugin-contacts
npm i @ionic-native/contacts
npx cap sync

Just remember

Important: Configuration Capacitor does not support Cordova install variables, auto configuration, or hooks, due to our philosophy of letting you control your native project source code (meaning things like hooks are unnecessary). If your plugin requires variables or settings to be set, you'll need to apply those configuration settings manually by mapping between the plugin's plugin.xml and required settings on iOS and Android.

Consult the iOS and Android configuration guides for info on how to configure each platform.

Compatibility Issues Some Cordova plugins don't work with Capacitor or Capacitor provides a conflicting alternative. See here for details and a known incompatibility list.