CODEWITHSUNDEEP
vue.jscordova-pluginscapacitor
Travis Klein
Travis Klein

Reputation: 85

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

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!

Upvotes: 5

Views: 4347

Answers (3)

Tafel
Tafel

Reputation: 1189

The Capacitor Community has its own contacts plugin: https://github.com/capacitor-community/contacts

It's preferred to use that repository (currently maintained by me) instead of the cordova one. Its codebase is cleaner, more up-to-date and better maintained. Moreover, it's specifically targeting Capacitor. Therefore the compatibility will be guaranteed.

Upvotes: 0

Kupe
Kupe

Reputation: 665

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!

Upvotes: 4

Ben Rasmussen
Ben Rasmussen

Reputation: 297

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.

Upvotes: 1

Related Questions