Building a Simple Weather App with Vue.js and OpenWeatherMap API

Introduction to the OpenWeatherMap API

The OpenWeatherMap API is a popular API used to fetch current and forecasted weather data. In this tutorial, we will use the API to build a simple weather app using Vue.js.

Step 1: Setting up the Project

First, we need to set up a new Vue.js project. We can do this by running the following command in our terminal:

npm install -g @vue/cli
vue create weather-app

Step 2: Fetching Weather Data from the OpenWeatherMap API

Next, we need to fetch the current weather data from the OpenWeatherMap API. We can do this by using the fetch API:

fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => console.log(data))

Step 3: Displaying the Weather Data

Finally, we need to display the weather data in our app. We can do this by creating a new component and using the v-for directive to loop through the weather data:

<template>
  <div>
    <h1>Current Weather</h1>
    <ul>
      <li>Temperature: {{ weather.main.temp }}°C</li>
      <li>Humidity: {{ weather.main.humidity }}%</li>
      <li>Wind Speed: {{ weather.wind.speed }} m/s</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weather: {}
    }
  },
  mounted() {
    fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
      .then(response => response.json())
      .then(data => this.weather = data)
  }
}
</script>