Cordova Plugin via Ionic Vue to iOS

Ionic Framework Ionic Vue
1

I’m an absolute beginner in using Ionic and I am trying to build an app utilizing geofencing.

I used the Capacitor instructions to add cordova-plugin-geofence and @ionic-native/geofence to my projects, successfully built an iOS version, but when I press the button to create a geofence in the running app I get the following console warnings:

[warn] - Native: tried calling Geofence.addOrUpdate, but the Geofence plugin is not installed.
[warn] - Install the Geofence plugin: 'ionic cordova plugin add cordova-plugin-geofence'

Of course running the suggested installation command won’t work, since the project is using Capacitor. Is there something to do to make the app recognize the regular npm installation? Is the Cordova plugin simply outdated (the last commit happened 4 years ago)? Or could it have something to do with Ionic Vue (and maybe Cordova compatibility)?

2

where the source code showing how you are loading the plugin? it would make it easier to help you out

3

The script in my Vue file:

import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/vue';
import { Geofence } from '@ionic-native/geofence/ngx';

export default  {
  name: 'Tab1',
  components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonButton },
  setup() {
    const geofence = new Geofence();

    function addGeofence() {
      const fence = {
        id: '000',
        latitude: 51,
        longitude: 12,
        radius: 30,
        transitionType: 3,
        notification: {
          id: 1,
          title: 'You crossed a fence',
          text: 'Good job!',
          openAppOnClick: true,
        },
      };
      geofence.addOrUpdate(fence).then(
        () => console.log('Geofence added'),
        (err) => console.log('Geofence failed to add'),
      );
    }

    return { geofence, addGeofence };
  },
}
1 Like
4

you need to install the plugin using npm

npm install cordova-plugin-geofence
npm install @ionic-native/geofence
ionic cap sync

should be

import { Geofence } from '@ionic-native/geofence';

and then I think…

    await Geofence.initialize();
    await Geofence.addOrUpdate(fence)
1 Like
5

First of all, thank you for looking at my code!

Do you mean like that?

  async setup() {
    await Geofence.initialize();

    async function addGeofence() {
      const fence = { … };
      await Geofence.addOrUpdate(fence).then(
        () => console.log('Geofence added'),
        () => console.log('Geofence failed to add'),
      );
    }

    return { addGeofence };
  },

It seems that this is the correct way to import the plugin, but then I get the same error on load, and the view doesn’t even render

[warn] - Native: tried calling Geofence.initialize, but the Geofence plugin is not installed.
[warn] - Install the Geofence plugin: 'ionic cordova plugin add cordova-plugin-geofence'
6

see edits to previous post… Cordova Plugin via Ionic Vue to iOS

also with await there is no need for then

  async setup() {
    await Geofence.initialize();

    async function addGeofence() {
      const fence = { … };
      try {
         await Geofence.addOrUpdate(fence);
         console.log('Geofence added'),
      } catch (e) {
         console.log('Geofence failed to add',e),
      }
    }
    return { addGeofence };
  },