Learning Vue Part 1: Building a weather app

Diving into Vue.js has been like discovering a new favorite tool in a DIY kit—intuitive, flexible, and surprisingly powerful. My first side project to get my hands dirty with Vue was a weather app, and it’s taught me a lot about the framework’s capabilities, as well as about web development in general. Here’s what I’ve learned so far.

1. Getting Started with Vue: Simplicity Meets Power

One of the first things that struck me about Vue.js is how easy it is to get up and running. Unlike some other frameworks that require a lot of setup and configuration, Vue was refreshingly straightforward. All I needed was a script tag to include Vue, and I was off to the races.

In my weather app, I used Vue’s createApp function to kickstart my application:

const { createApp, ref } = Vue;

createApp({
    setup() {
        const locationValue = ref('');
        const responseMessage = ref(null);
        const selectedHourlyForecast = ref([]);
        const selectedFutureForecast = ref([]);
        // More code here...
    }
}).mount("#app")

This approach is clean and keeps everything in one place, making it easier to manage the state and logic of the application.

2. Reactive Data Binding: The Magic of ref

Vue’s reactivity system is one of its standout features. By using ref, I was able to make my data reactive, meaning that any changes to the data automatically update the DOM. For instance, when a user submits a location, the weather data is fetched and displayed without any manual DOM manipulation:

const locationValue = ref('');
const responseMessage = ref(null);

const submitLocation = async () => {
    try {
        const response = await fetch(`http://api.weatherapi.com/v1/forecast.json?key=${APIKEY}&q=${locationValue.value}&days=6&aqi=no&alerts=no`);
        const result = await response.json();
        responseMessage.value = result;
    } catch (error) {
        console.log("An error occurred while fetching weather data", error);
        alert("Location not found");
    }
};

The seamless update of the UI based on changes in data is something that makes Vue.js incredibly powerful for building interactive applications.

3. Conditional Rendering: Show Only What’s Needed

Vue’s directives like v-if and v-else make it easy to conditionally render elements based on the state of your data. In my weather app, I used these directives to display the weather data only when it’s available:

<div v-if="responseMessage">
    <div class="h1">{{responseMessage.current.temp_c}}°C</div>
    <div>{{responseMessage.location.name}}, {{responseMessage.location.country}}</div>
</div>
<div v-else>
    <div class="h1">N/A °C</div>
    <div>No location present</div>
</div>

This kind of conditional rendering ensures that the app remains clean and informative, only showing users what they need to see when they need to see it.

4. Handling User Input: The Power of v-model

Handling user input in Vue.js is a breeze with the v-model directive. In my app, I used v-model to bind the input field directly to my locationValue variable, making it reactive and keeping the data in sync with the user’s input:

<input type="text" class="form-control" placeholder="Enter location..." v-model="locationValue">

This simple binding eliminated the need for manual event listeners, reducing boilerplate code and making the application more maintainable.

5. Breaking Down the Weather Data: Iterating with v-for

Displaying multiple pieces of data, like the hourly or future weather forecasts, was made easy with Vue’s v-for directive. This allowed me to loop through arrays of data and render them dynamically:

<div v-for="(forecast, index) in selectedHourlyForecast" :key="index" class="p-2 text-center">
    <div>{{forecast.temp_c}}°C</div>
    <span class="icon"><img :src="'https:' + forecast.condition.icon" alt=""></span>
    <div class="font-weight-bold font-italic">{{forecast.condition.text}}</div>
    <div>{{forecast.time.slice(11,16)}}</div>
</div>

This made it easy to create a flexible and responsive UI that could display a varying number of data points, depending on the user’s location and the time of day.

6. Error Handling: Don’t Forget to Catch Those Exceptions

Working with APIs always comes with the possibility of errors, whether it’s a network issue or an invalid location. Vue made it easy to handle these errors gracefully, ensuring that the app doesn’t crash and burn when something goes wrong:

catch (error) {
    console.log("An error occurred while fetching weather data", error);
    alert("Unable to retrieve weather details");
}

This helped me understand the importance of error handling in making robust applications that can deal with unexpected situations.

Wrapping Up

Building this weather app with Vue.js has been an enlightening experience. I’ve learned a lot about how to structure an application, and create a responsive UI that updates in real-time based on user input. Vue’s simplicity and flexibility have made this process enjoyable, and I’m excited to continue exploring what else I can build with this powerful framework.

If you’re considering diving into Vue.js, I’d highly recommend starting with a small project like a weather app. It’s a great way to learn the basics while building something tangible that you can actually use.

Look out for the next project I will build soon while learning #Vue. Happy coding!