In this recipe, first, we imported the exposed APIs - createApp, defineComponent, setup, ref, onMounted, and onUnmounted, – as constants, which we will use to create the component. Then, we created the fetchLocation function, which has the responsibility of getting the user's geolocation data and returning it as reactive data that can be automatically updated when the user changes their location.
The ability to fetch the user GPS positions was possible because of the navigator.geolocation API present on modern browsers, which are able to fetch the user's current GPS position. Using this data provided by the browser, we were able to use it to define the variables created with the Vue ref APIs.
We created the component using the setup function of the Vue object declaration, so the rendering knows that we are using the new composition API as the component creation method. Inside the setup function, we imported the dynamic variables of the fetchLocation function...