DEV Community


Use Native GPS With VueJS for iOS and Android

simerca profile image Ayrton ・1 min read

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

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


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

import { Plugins } from '@capacitor/core';

const { Geolocation } = Plugins;
export default {

  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
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;


const wait = Geolocation.watchPosition(
enableHighAccuracy: true;
}, (position, err) => 

Very easy to use in your application !

Discussion (1)

simerca profile image
Ayrton Author

Don't forget to discuss with me because ?... Not lot's of reasons, but do this :D

Forem Open with the Forem app