TypeScript icon, indicating that this package has built-in type declarations

0.1.21 • Public • Published

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

Package Sidebar


Weekly Downloads






Unpacked Size

496 kB

Total Files


Last publish


  • skyatura