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 !