A simple reactive wrapper for [Geolocation Web API](

Downloads in past


14220.1.212 years ago4 years agoMinified + gzip package size for vue-geolocation-api in KB


Vue Geolocation API
A simple reactive wrapper for Geolocation Web API


  • Customizable
  • Reactive geolocation position
  • Simple watcher control
  • SSR Compatibility
  • GeoJSON output


Install with npm
npm install --save vue-geolocation-api
Install with yarn
yarn add vue-geolocation-api

Vue instance

import Vue from 'vue'
import VueGeolocationApi from 'vue-geolocation-api'

Vue.use(VueGeolocationApi/*, { ...options } */)


Add to modules section at your nuxt.config.js
module.exports =  {
  modules:  [
  geolocation:  {
    // watch: true,


Computed properties

export default {
  // ...
  computed: {
    inRange() {
      const coords = this.$geolocation.coords
      if (!coords) return '?'
      return distanceFrom(coords, this.destination) > 150
Note that distanceFrom is not included in this package, if you need this feature I recommend to use with @turf/distance or geo-distance

Component templates

    <span v-if="$geolocation.loading">Loading location...</span>
    <span v-else-if="!$geolocation.supported">Geolocation API is not supported</span>
    <span v-else>Range from destination: {{ inRange ? 'Allowed' : 'Disallowed' }}</span>

Watch statements

export default {
  // ...
  watch: {
    inRange(reached) {
      if (reached !== true) return
      console.log('Congratulations, you arrived')
      this.$ = false // Stop watching location


$geolocation.position Position

Exposes the results from getCurrentPosition
or the last result from watchPosition. Default or unavailable: null

$geolocation.loading Boolean

If true, means the location is currently being executed.

$geolocation.supported Boolean

If true means the location api is available in the browser. If false means the location api is not available in the browser. if null means the support wasn't verified yet.

$geolocation.coords Coordinates

Alias for $geolocation.position.coords Default or unavailable: null

$geolocation.timestamp Timestamp

Alias for $geolocation.position.timestamp Default or unavailable: null

$geolocation.geoJSON GeoJSON Point

Formatted coordinates. Default or unavailable: null


$ Boolean

If true will initiate watchPosition. If false stop watchPosition. This property can be changed dynamically and will react to it's changes.

$geolocation.options PositionOptions

Defines the parameters that will be used by getCurrentPosition and watchPosition. Changing this property will trigger an watchPosition reload if currently watching. Important: This property is only reactive if you replace it entirely. If you just want to change one options check the method setOption


$geolocation.getCurrentPosition(?options) Promised Position

Simply wraps the navigator.geolocation.getCurrentPosition as a Promise.

$geolocation.setOption(key, value) Undefined

Reactively updates the key property in $geolocation.options with value.

$geolocation.checkSupport() Boolean

Forces the $geolocation.supported to update.

Contributing or Issuing

Coming soon...

Created by @SkyaTura