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

useGeolocation

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.

Usage

import { useGeolocation } from '@vueuse/core'

const { coords, locatedAt, error } = 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.

Config

useGeolocationfunction takes PositionOptions object as an optional parameter.

Component

<UseGeolocation v-slot="{ coords: { latitude, longitude } }">
  Latitude: {{ latitude }}
  Longitude: {{ longitude }}
</UseGeolocation>
Learn more about component usage

Type Declarations

export interface GeolocationOptions
  extends Partial<PositionOptions>,
    ConfigurableNavigator {}
/**
 * Reactive Geolocation API.
 *
 * @see /useGeolocation
 * @param options
 */
export declare function useGeolocation(options?: GeolocationOptions): {
  isSupported: boolean | undefined
  coords: Ref<GeolocationCoordinates>
  locatedAt: Ref<number | null>
  error: Ref<{
    readonly code: number
    readonly message: string
    readonly PERMISSION_DENIED: number
    readonly POSITION_UNAVAILABLE: number
    readonly TIMEOUT: number
  } | null>
}
export declare type UseGeolocationReturn = ReturnType<typeof useGeolocation>

Source

Source • Demo • Docs