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?
Ionic Vue components work anywhere, including iOS, Android, and PWAs. Build native apps without ever leaving the Web.
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.
To add Ionic Framework to an existing Vue project, install the @ionic/vue and @ionic/vue-router packages.
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.
Quick of of this repo worked. Just had to replace two files.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With