Use Native GPS With VueJS for iOS and Android

Hi people who want to conquer the planet! Human btw

Today I show you how to use GPS inside your VueJS app of destination to Android or iOS.

If you can’t understand how VueJS can be integrated inside mobile app take a view on my last post !

Mobile App in 5 minutes with VueJS

Did you know Capacitor ?

Capacitor is a library from develop by Ionic and It make a join with JavaScript code and Native Mobile functions.

Today we speak about the GPS but Capacitor have lots of functionality take a look here

https://capacitorjs.com/docs/getting-started

The first thing is to init capacitor inside your project application

npm install @capacitor/core @capacitor/cli 

Next run

npx cap init 

Dont forget to change build dir inside the capacitor.config.js

NOW

Inside your application when you want get GeoLocation from user,
You do use

 import { Plugins } from '@capacitor/core'; const { Geolocation } = Plugins; export default { methods:{ async getCurrentPosition() { const coordinates = await Geolocation.getCurrentPosition(); console.log('Current', coordinates); }, watchPosition() { const wait = Geolocation.watchPosition({}, (position, err) => { }) } } } 

Now you can look on variable coordinates, has you can see is there an object like

{ speed:0, // on km/h latitude:x, longitude:x, accurate:x // on metters } 

It's directly work on you browser and you can build it with Capacitor into a Mobile App.

You can enable high accurency with this option

enableHighAccuracy: true; 

exemple

const wait = Geolocation.watchPosition( { enableHighAccuracy: true; }, (position, err) => { console.log('error',err); }) 

Very easy to use in your application !