Vue Js – Weather App

Vue Js – Weather App

Created a weather app using Vue and Open Weather Map API.

Created a vue app using Vue CLI – vue create vue-weather-app

Code Skeleton

App.vue – template code : use of v-model, v-on:click, interpolation syntax

  <div id="container">
    <h3>Weather app using Vue and Open Weather map API</h3>
      <button v-on:click="callApi()">Submit</button>
    <div class="weather-data" v-if="typeof weatherData.main != 'undefined'">
      <div class="desc">{{ todayDate }}</div>
      <div class="details">{{ Math.floor(weatherData.main.temp) }} °C</div>
      <div class="desc">
        Min Temp: {{ Math.floor(weatherData.main.temp_min) }} °C
      <div class="desc">
        Max Temp: {{ Math.floor(weatherData.main.temp_max) }} °C
      <div class="desc">
        {{[0].main }}
        ({{[0].description }})


App.vue – script – use of JavaScript’s fetch() to call the API.

export default {
  name: "App",
  data() {
    return {
      searchQuery: "",
      base_url: "",
      api_key: "3e51fac7d72844baf00526a323947c79",
      weatherData: {},
      todayDate: "",
  methods: {

    callApi() {
      let url = `${this.base_url}${this.searchQuery}${"&appid="}${
        .then((response) => response.json())
        .then((data) => this.setWeatherData(data));

    setWeatherData(data) {
      this.weatherData = data;
      let todayDate = new Date();
      this.todayDate = `${todayDate.getDate()}${"/"}${todayDate.getMonth()}${"/"}${todayDate.getFullYear()}`;


App.vue – styles

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background-image: linear-gradient(#bdc3c7, #2c3e50);
  height: 90vh;
#container .search-input {
  box-shadow: 5px 5px grey;
  width: 250px;
  height: 30px;
  font-size: 20px;
  color: darkgreen;
button {
  margin-top: 20px;
  width: 150px;
  height: 30px;
  font-size: 20px;
  background-color: black;
  color: white;
.desc {
  color: cornflowerblue;
  margin-top: 10px;
  font-size: 50px;
  text-shadow: 1px 3px rgba(0, 0, 0, 0.5);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
.details {
  color: chocolate;
  margin-top: 10px;
  font-size: 70px;
  text-shadow: 1px 3px rgba(0, 0, 0, 0.25);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
h3 {
  color: tomato;
  font-size: 40px;
  text-shadow: 1px 3px rgba(0, 0, 0, 0.25);


Open Weather Map API which has been used is as below:{city name}&appid={API key}&units=’Metric’

API Key can be generated after signing up at

App screenshots:

image1Image 1 – Page loadimage2Image 2 – New Delhiimage3Image 3 – Londonimage 4Image 4 – Khartoum (capital of Sudan)

Entire code can be found at –

Did you find this article valuable?

Support Anurag Sinha by becoming a sponsor. Any amount is appreciated!