A simple reactive wrapper for [Geolocation Web API](https://developer.mozilla.org/pt-BR/docs/Web/API/Geolocation)
npm install vue-geolocation-apibash
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
Loading location...
Geolocation API is not supported
Range from destination: {{ inRange ? 'Allowed' : 'Disallowed' }}
`$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: nullOptions
$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 setOptionMethods
$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.