Skip to content

useGeolocation

Category
Export Size
553 B
Last Changed
6 months ago

Reactive Geolocation API. It allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

Demo

{
  "coords": {
    "accuracy": 0,
    "latitude": null,
    "longitude": null,
    "altitude": null,
    "altitudeAccuracy": null,
    "heading": null,
    "speed": null
  },
  "locatedAt": null,
  "error": null
}

Usage

ts
import { 
useGeolocation
} from '@vueuse/core'
const {
coords
,
locatedAt
,
error
,
resume
,
pause
} =
useGeolocation
()
StateTypeDescription
coordsCoordinatesinformation about the position retrieved like the latitude and longitude
locatedAtDateThe time of the last geolocation call
errorstringAn error message in case geolocation API fails.
resumefunctionControl function to resume updating geolocation
pausefunctionControl function to pause updating geolocation

Config

useGeolocation function takes PositionOptions object as an optional parameter.

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue
<template>
  <UseGeolocation v-slot="{ coords: { 
latitude
,
longitude
} }">
Latitude: {{
latitude
}}
Longitude: {{
longitude
}}
</UseGeolocation> </template>

Type Declarations

Show Type Declarations
ts
export interface UseGeolocationOptions
  extends 
Partial
<PositionOptions>,
ConfigurableNavigator {
immediate
?: boolean
} /** * Reactive Geolocation API. * * @see https://vueuse.org/useGeolocation * @param options */ export declare function
useGeolocation
(
options
?: UseGeolocationOptions): {
isSupported
:
ComputedRef
<boolean>
coords
:
Ref
<
{ readonly
accuracy
: number
readonly
altitude
: number | null
readonly
altitudeAccuracy
: number | null
readonly
heading
: number | null
readonly
latitude
: number
readonly
longitude
: number
readonly
speed
: number | null
}, |
Omit
<GeolocationCoordinates, "toJSON">
| { readonly
accuracy
: number
readonly
altitude
: number | null
readonly
altitudeAccuracy
: number | null
readonly
heading
: number | null
readonly
latitude
: number
readonly
longitude
: number
readonly
speed
: number | null
} >
locatedAt
:
ShallowRef
<number | null, number | null>
error
:
ShallowRef
<
GeolocationPositionError | null, GeolocationPositionError | null >
resume
: () => void
pause
: () => void
} export type
UseGeolocationReturn
=
ReturnType
<typeof
useGeolocation
>

Source

SourceDemoDocs

Contributors

Anthony Fu
Antério Vieira
Jelf
SerKo
IlyaL
Anthony Fu
丶远方
vaakian X
Enric Bisbe Gil
Egor Startsev
Michael J. Roberts
Shinigami
wheat
Alex Kozack
Sanxiaozhizi

Changelog

v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

AI-Driven Development
You. But 10x faster
The structured masterclass to help you leverage AI and build with an edge
Join Early