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>