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

5
votes

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!

2
vue.jscordova-pluginscapacitor
Did you ever figure this out? I am looking to do the same thing and can't find any tutorials specifically around this workflow. - Kupe
I didn't yet. It wasn't crucial for me so I'm holding off for now. - Travis Klein
btw the contact plugin actually maintained by cordova and now its deprecated. hopefully ionic capasitor can add this contact as built in plugin - Franky So

2 Answers

4
votes

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!

1
votes

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.