How to Build a Weather App with Vue.js Step by Step?
In this blog post, I will explain how you can build a simple weather application using Vue.js and OpenWeather API. Let's see step by step how this application can be created.
1. Preparation:
If Vue CLI is not installed on the system, the first step is to install Vue CLI globally:
npm install -g @vue/cli
2. Creating a Vue Project:
Let's create a new Vue project:
vue create vue-weather-app
Move into the directory of the project we've created:
cd vue-weather-app
3. Installing Required Packages:
Add Axios library and BootstrapVue to our project:
npm install axios
npm i bootstrap-vue
4. Including Style Files:
In the main.js file, let's include Bootstrap style files:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
5. Creating Vue App and Using BootstrapVue:
Creating Vue App and Using BootstrapVue:
const app = createApp(App);
app.use(BootstrapVue3);
app.mount('#app');
6. Main Component Design:
Then, to see our initial design, add this code to our App.vue file.
<template>
<div id="app">
<BForm>
<BFormGroup id="input-group-2" label="City Name:" label-for="input-2">
<BFormInput id="input-2" class="mb-2 me-sm-2 mb-sm-0" v-model="city" placeholder="? City Name Enter" required />
<!-- Arama ikonu ekledik -->
</BFormGroup>
<BButton @click="getWeather">
<span class="icon">🔍</span> <!-- Basit bir arama ikonu -->
Search
</BButton>
<WeatherComponent v-if="weatherData" :data="weatherData" />
</BForm>
</div>
</template>
7. Fetching Weather Information:
We will send the city information to OpenWeather API with Axios and retrieve the weather details. We'll store this information as a variable named weatherData.
<script>
import WeatherComponent from './components/WeatherComponent.vue';
import axios from 'axios';
export default {
name: 'App',
components: {
WeatherComponent
},
data() {
return {
city: '',
weatherData: null
};
},
methods: {
async getWeather(event) {
event.preventDefault();
try {
const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.city},US&appid=${process.env.VUE_APP_API_KEY}`, {
headers: {
'Content-Type': 'application/json',
}
});
this.weatherData = response.data;
} catch (error) {
console.error("Hava durumu bilgisi alınırken bir hata oluştu:", error);
}
}
}
};
</script>
8. .env File and API Key:
You can get the necessary API key for making the API request from the OpenWeather website. Store this key in the .env file as VUE_APP_API_KEY.
9. Creating the Weather Component:
Under the Components folder, open the WeatherComponent space and insert the code to display the values;
<template>
<br>
<div>
<h2>{{ data.name }}</h2>
<p>Temperature: {{ kelvinToCelsius(data.main.temp) }}°C</p>
<p>Description: {{ data.weather[0].description }}</p>
</div>
</template>
<script>
export default {
name: 'WeatherComponent',
props: {
data: Object
},
methods: {
kelvinToCelsius(kelvin) {
return (kelvin - 273.15).toFixed(2);
}
}
};
</script>
10. Running the Application:
Start the project to observe the application you've created. You can access the application codes from my Github account.
Also, you can check out the Realtime Chat with Laravel Vue Projesine I did before.
Comments (0)