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
``bash
npm install --save vue-geolocation-api
`
Install with yarn
`bash
yarn add vue-geolocation-api
`

$3

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

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


$3


Add to modules section at your nuxt.config.js
`js
module.exports = {
modules: [
'vue-geolocation-api/nuxt',
],
geolocation: {
// watch: true,
},
}
`

Usage

$3

`js
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

$3

`html

`

$3

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

Outputs

$3

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

$3

If true, means the location is currently being executed.

$3

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.

$3

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

$3

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

$3

Formatted coordinates.
Default or unavailable: null

Options

$3

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

$3

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

$3

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

$3

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

$3

Forces the $geolocation.supported` to update.

Contributing or Issuing

$3

#

$3