Working with different types of APIs

In order to retrieve local weather, we need a way to retrieve a location. The weather service we will be using accepts different sorts of location data, but we’ll go with latitude and longitude for this example.

It’s convenient that the browser’s geolocation API can provide us with just that! Let’s start by building a component that requests this information and displays it to the user interface.

Let’s create a file in the components folder, called GetLocation.vue. We’ll start in the script tag by importing the utilities from Vue.js and define the data that’s expected to be available:

<script lang="ts" setup>import { ref } from "vue";
import type { Ref } from "vue";
type Geolocation = {
  latitude: number;
  longitude: number;
};
const coords: Ref<Geolocation | undefined>= ref();
</script>

Now, we’re saying that...