Drops ARHunt vuejs example for asking for the user's location

arHunt.vue

<template>
  <b-container>
    <b-row align-h="center" align-v="center">
      <b-col cols="12" class="col-lg-6">
        <div id="bg" class="w-100">
          <b-form v-if="debug" @submit.prevent="submitForm()">
            <b-form-group id="user-coords">
              <b-form-input
                id="cords"
                v-model="coordsInput"
                type="text"
                name="coords"
              />
            </b-form-group>
            <b-form-group id="poinearby">
              <b-form-textarea
                id="nearby"
                v-model="nearbyString"
                type="text"
                name="nearby"
                rows="3"
                max-rows="6"
              />
            </b-form-group>
            <b-spinner
              v-if="loading"
              style="width: 3rem; height: 3rem"
              variant="secondary"
              label="Loading drop"
              class="mt-5"
            />
          </b-form>
        </div>
      </b-col>
    </b-row>
    <!-- on desktop -->
    <b-container v-if="$device.isDesktop" class="text-center">
      <b-row align-h="center" align-v="center">
        <b-col class="col-lg-6">
          <img
            src="/dropsIcon_sm.png"
            class=""
            alt="Drops"
          >
          <h3>
            DROPS
          </h3>
        </b-col>
      </b-row>
      <b-row>
        <b-col class="col-lg-12">
          <h4>
            To view this AR drop you'll need to be on a mobile device.
          </h4>
          <p>Please click or scan this QR code on your phone or tablet</p>
          <a :href="dropUrl" target="_blank">
            <vue-qrcode
              v-if="dropUrl"
              :value="dropUrl"
              dark="#212529"
              class="qr-code"
            />
          </a>
        </b-col>
        <b-col class="col">
          <a :href="dropUrl" target="_blank">
            {{ dropUrl }}
          </a>
        </b-col>
      </b-row>
    </b-container>
    <div v-else-if="askForGeo">
      <b-container fluid class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
        <div>
          <p class="text-center">
            <b>
              AR Hunt
            </b>
          </p>
          <p>
            An exclusive <b v-if="handle">{{ this.handle }}</b> Drop is nearby. Please share your Geolocation to see where it is located!
          </p>
          <b-button
            class="w-100 text-center"
            variant="dark"
            block
            @click="initGeofenceOK"
          >
            GO!
          </b-button>
        </div>
      </b-container>
    </div>
  </b-container>
</template>

<script>
import VueQrcode from 'vue-qrcode'

export default {
  layout: 'default',
  components: {
    VueQrcode
  },
  asyncData ({ req, res }) {
    return {
      baseUrl:
        'https://' +
        (process.server ? req.headers.host : window.location.hostname)
    }
  },
  data () {
    return {
      debug: this.$route.query ? this.$route.query.debug : false,
      show404: false,
      handle: this.$route.params.handle,
      next: this.$route.query && this.$route.query.next ? this.$route.query.next : 0,
      locationAllowed: false,
      loading: false,
      currentCoords: null,
      coordsInput: '',
      nearby: [],
      nearbyString: '',
      error: { message: '' },
      askForGeo: false,
      clonedDrop: {},
      watchId: null,
      gettingNearby: false,
      dropUrl: ''
    }
  },
  mounted () {
    const savedData = localStorage.getItem(this.handle + ':nearbyData')
    this.dropUrl = `${this.baseUrl}/${this.handle}/ARhunt`
    if (savedData) {
      this.nearby = JSON.parse(savedData)
      this.nearbyString = this.nearby
      if (!this.next) {
        this.next = 0
      }
      this.main()
    } else {
      this.askForGeo = true
    }
  },
  methods: {
    initGeofenceOK () {
      this.askForGeo = false
      this.locationAllowed = true
      this.initGeofence()
    },
    initGeofence () {
      if ('geolocation' in navigator && this.locationAllowed) {
        this.loading = true
        this.watchId = navigator.geolocation.watchPosition(
          (position) => {
            this.loading = false
            this.currentCoords = {
              lon: position.coords.longitude,
              lat: position.coords.latitude
            }
            this.coordsInput = position.coords.longitude + ', ' + position.coords.latitude
            if (!this.gettingNearby) {
              this.getNearby()
            }
          },
          (err) => {
            this.loading = false
            this.locationAllowed = false
            this.$toast.error(err.message, { autoHide: false })
          },
          { enableHighAccuracy: true, maximumAge: 0, timeout: 20000 }
        )
      } else {
        console.log('Geolocation not available')
      }
    },
    async getNearby () {
      if (this.watchId) { navigator.geolocation.clearWatch(this.watchId) }
      this.gettingNearby = true
      const response = await this.$axios.post(...).then((response) => {
        this.nearby = response.data
        this.nearbyString = JSON.stringify(this.nearby)
        this.storeNearby(this.nearbyString)

        this.main()
      }).catch((error) => {
        debugger
        const errMessage = error.response.data.error
        this.$toast.error(errMessage)
      })
    },
    main () {
      this.getCreatorId().then((response) => {
        const handleUser = response.data
        // CLONE DROP
        if (handleUser && handleUser.my_set) {
          const creatorId = handleUser.my_set._creator
          const newDrop = this.cloneDrop(creatorId, this.nearby[this.next], this.next).then((res) => {
            this.clonedDrop = res.data
            window.location.href = '/d/' + this.clonedDrop._id
          }).catch((error) => {
            this.show404 = true
            const errMessage = error.data
            this.$toast.error(errMessage)
          })
        }
      })
    },
    storeNearby (data) {
      if (process.client) {
        localStorage.setItem(...)
      }
    },
    async cloneDrop (createorId, place, index) {
      return await this.$axios.post(...)
    },
    getCreatorId () {
      return this.$axios.get(...)
    }
  }
}
</script>

<style scoped>
</style>