useGeolocation

Category

Sensors

Export Size

553 B

Last Changed

4 days 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

sourceplayground (beta)

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

Usage

import { useGeolocation } from '@vueuse/core'

const { coords, locatedAt, error, resume, pause } = useGeolocation()

State	Type	Description
coords	Coordinates	information about the position retrieved like the latitude and longitude
locatedAt	Date	The time of the last geolocation call
error	string	An error message in case geolocation API fails.
resume	function	Control function to resume updating geolocation
pause	function	Control 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.

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

Type Declarations

Show Type Declarations

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

Source • Demo • Docs

Contributors

NoiseFan

Changelog

No recent changes