vue-geolocation-api

Features

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

Setup

npm install --save vue-geolocation-api

yarn add vue-geolocation-api

Vue instance

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

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

Nuxt

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
    }
  }
}

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

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

$geolocation.loading Boolean