Vue Geolocation API

A simple reactive wrapper for Geolocation Web API

Features

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

Setup

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 } */)

Nuxt

Add to modules section at your nuxt.config.js

module.exports =  {
  modules:  [
    'vue-geolocation-api/nuxt',
  ],
  geolocation:  {
    // watch: true,
  },
}

Usage

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

<template>
  <div>
    <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>
  </div>
</template>

Watch statements

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

Outputs

$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

Options

$geolocation.watch [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

Methods

$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