Vue Js get current location by latitude and longitude coordinates: Vue Js gets the current location of the user with the Geolocation API, passes this data to its components, and returns the current location by latitude and longitude coordinates. By using this property, we can find the geographical coordinates of a user device, such as its latitude and longitude. In this tutorial, we will learn how to get the current location of the user with the help of Vue JS.
Get Current Location Latitude and Longitude in Vue Js
Finding the current location of a user can be achieved in Vue.js by using the Geolocation API, which provides access to information about the user’s current location and return latitude and longitude coordinates
To Get the user’s current position in Vue Js
<div id="app">
<p>Latitude = {{currLocation.latitude}}</p>
<p>Longitude = {{currLocation.longitude}}</p>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
currLocation: ''
}
},
mounted() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(currentPosition => {
this.currLocation = {
latitude: currentPosition.coords.latitude,
longitude: currentPosition.coords.longitude
}
})
}
else {
alert('Geolocation is not supported in this browser')
}
}
}).mount("#app");
</script>
Output of above example
