Geolocation API

Geolocation API (opens new window).

Parameters

import { useGeolocation } from "vue-composable";

const geolocation = useGeolocation(options?);

Parameters	Type	Required	Default	Description
options	PositionOptions & {immediate?: boolean}		{ immediate: true }	Options to handle geoLocation, immediate will trigger watchPosition on mounting

State

The useGeolocation function exposes the following reactive state:

import { useGeolocation } from "vue-composable";

const { supported, coords, highAccuracy, error, timestamp } = useGeolocation();

State	Type	Description
supported	Boolean	Checks if the browser supports Geolocation
coords	Ref<Position>	Position object
highAccuracy	Ref<Boolean>	enable or disable highAccuracy mode
error	Ref<PositionError>	last position error
timestamp	Ref<Number>	Timestamp of the last position or error

Methods

The useGeolocation function exposes the following methods:

import { useGeolocation } from "vue-composable";

const { refresh } = useGeolocation();

Signature	Description
refresh	Refreshes the location. If immediate:false it will add a watch on watchPosition and if called multiple times will call getCurrentPosition

Example

Supported: false

coords:

No coords

Code

<template>
  <div>
    <h6>
      Supported: <b>{{ supported }}</b>
    </h6>
    <button @click="refresh">Request location</button>
    <div>
      coords:
      <ul v-if="coords">
        <li>latitude: {{ coords.latitude }}</li>
        <li>longitude: {{ coords.longitude }}</li>
        <li>altitude : {{ coords.altitude }}</li>
        <li>accuracy: {{ coords.accuracy }}</li>
        <li>altitudeAccuracy: {{ coords.altitudeAccuracy }}</li>
        <li>heading : {{ coords.heading }}</li>
        <li>speed : {{ coords.speed }}</li>
      </ul>
      <div v-else-if="error">
        <p><b>Error:</b> {{ error }}</p>
      </div>
      <div v-else>
        No coords
      </div>
    </div>
  </div>
</template>

<script>
import { useGeolocation } from "vue-composable";
export default {
  setup() {
    return useGeolocation({ immediate: true });
  }
};
</script>