Building a Local Weather App

Now that we can build a small app, we can add a bit more complexity. In this case, we’ll take a look at including another browser API and combining it with an external data source for our app. We will build a small weather app that returns the current weather.

We will start applying a different means of styling, using Tailwind as our CSS framework of choice, and in order to provide some additional robustness, we will also take a look at including some tests in our application.

We’ll cover the following topics in this chapter:

• Working with external data coming from different types of APIs
• How to handle asynchronous data
• Applying Tailwind to quickly style any application
• Ensuring stability by adding unit tests for features

Let’s see what requirements we have to fulfil to get our application up and running.

Technical requirements

For this chapter, we are going to use a third-party API to provide us with actual data. We need to register an account at https://www.weatherapi.com/ and retrieve the API keys for usage in our app.

We’ll add Tailwind CSS to apply styling to our app. The https://tailwindcss.com/ website offers extensive documentation as well as an installation guide.

For our unit test, we’ll use the Vitest framework: https://vitest.dev/.

You can find the source code here: https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3/tree/main/03.weather.

Initializing the app

Let’s begin by starting with a slightly different configuration for the Vue.js CLI starter:

npm init vue@latest

Hit y to proceed, choose vue-local-weather as the project name, and select the options shown in the following screenshot:

Figure 3.1 – The setup configuration for the local weather app

After following the instructions to install the dependencies and cleaning up the default files, we can get to work!

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...

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...

Styling with Tailwind

Tailwind CSS is a popular utility-based CSS framework that we can use to build and style user interfaces by using and combining predefined classes. Tailwind is very scalable due to abstracting the writing of CSS rules, which provides consistency and maintainability where it’s used. Let’s take a look at how we can apply Tailwind CSS to our little application.

The installation guide (https://tailwindcss.com/docs/guides/vite) covers all of the steps we need to execute:

1. First, we will have to add the dependencies to the project:

   npm install -D tailwindcss postcss autoprefixer

   We’re installing Tailwind, but also the tooling to allow Vite to process the stylesheet using PostCSS. PostCSS is a powerful JS tool for transforming CSS using JavaScript (https://postcss.org/).

2. Next, we’ll initialize the default configuration for Tailwind:

   npx tailwindcss init -p

   The command will have generated two configuration files for us (a PostCSS config...

Ensuring stability with Vitest

Now that we have a working app, adding or removing a property can be done with ease. Just update the file and you’re ready. This is, however, not always a desirable situation. Having the ability to remove properties that easily could result in unwanted bugs in your application!

We can add more control to our code by describing its behavior using tests. In this part, we’ll take a look at adding unit tests with Vitest and Vue Test Utils, to demonstrate where unit tests can help you (and where they cannot).

Vue Test Utils

The official testing library for Vue.js projects is Vue Test Utils (https://test-utils.vuejs.org/). A testing framework is a series of tools and functions that you can use to create isolated instances of a component and manipulate it to assert certain behaviors.

The purpose of unit testing is to validate that each unit (or component) of the software is working as expected and meets the specified requirements. In...

Summary

At this point, we’ve added a bit more complexity to our app, any external resource calls for additional error handling, and we’ve learned how to deal with asynchronous data using a loading state. We’ve been able to quickly style our app using the utility style CSS framework Tailwind. With the unit test, we’ve made sure that we can assert that our application’s core features will continue to work as expected or alarm us if the output changes in any way.

In the next chapter, we’ll focus on connecting more extensively with a third-party API, by combining multiple endpoints from an API into a single app.