Handling data from a third-party API

Now that we have our coordinates, we can start to request localized weather data. For this example, we’ll make use of a public weather API (https://www.weatherapi.com/). In order to make use of the service, we’ll need to request an API key. If you sign up for an account, the free tier will allow you to make 1,000,000 requests per month, which should be more than enough!

It is common practice to store these sorts of access keys or secrets in a local environment variables file. This practice allows our build processes to detach local development operations from our production environments. It keeps those variables in one place, rather than being spread throughout your application.

For now, we’ll store the API key in a file at the root of your project called .env, with the following contents:

VITE_APP_WEATHER_API_KEY=Replace this with the key

The VITE_APP_ prefix makes sure that Vite automatically exposes the variable...