Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic-native angular example code to vuejs

With the Ionic Native there is the possibility to use iBeacons via a native-plugin: https://ionicframework.com/docs/native/ibeacon

The example code is written for people that use Ionic with AngularJS, but I'm using VueJS and I cannot figure out how to get this to work:

The Angular version of the Example code:

import { IBeacon } from '@ionic-native/ibeacon/ngx';

constructor(private ibeacon: IBeacon) { }

...


// Request permission to use location on iOS
this.ibeacon.requestAlwaysAuthorization();
// create a new delegate and register it with the native layer
let delegate = this.ibeacon.Delegate();

// Subscribe to some of the delegate's event handlers
delegate.didRangeBeaconsInRegion()
  .subscribe(
    data => console.log('didRangeBeaconsInRegion: ', data),
    error => console.error()
  );
delegate.didStartMonitoringForRegion()
  .subscribe(
    data => console.log('didStartMonitoringForRegion: ', data),
    error => console.error()
  );
delegate.didEnterRegion()
  .subscribe(
    data => {
      console.log('didEnterRegion: ', data);
    }
  );

let beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E');

this.ibeacon.startMonitoringForRegion(beaconRegion)
  .then(
    () => console.log('Native layer received the request to monitoring'),
    error => console.error('Native layer failed to begin monitoring: ', error)
  );

But.. what I expected to work was the following in VueJS:

On top of my component importing it: import { IBeacon } from '@ionic-native/ibeacon/ngx';

And use it like this:

foobar() {
let _ibeacon = IBeacon.Delegate()
  alert('Hi iBeacon');
  _ibeacon.didStartMonitoringForRegion()
    .subscribe(
      data => console.log('didStartMonitoringForRegion: ', data),
      error => console.error()
    );
}

But even the alert isn't shown. What IS the correct way to use the iBeacon plugin with Vue and ionic?

like image 678
user1469734 Avatar asked Jan 10 '20 15:01

user1469734


People also ask

Can I use ionic with Vue?

Ionic Vue components work anywhere, including iOS, Android, and PWAs. Build native apps without ever leaving the Web.

Is ionic Vue native?

Today I am thrilled to announce the release of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App. Ionic Vue has been written to take advantage of all the great new features that recently shipped in Vue 3.

How do I add an ion to existing Vue project?

To add Ionic Framework to an existing Vue project, install the @ionic/vue and @ionic/vue-router packages.

Is ionic Vue free?

​ First off, if you're new here, welcome! Ionic Framework is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. Write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.


1 Answers

Quick of of this repo worked. Just had to replace two files.

like image 123
user1469734 Avatar answered Nov 11 '22 04:11

user1469734