Added city widget

src/components/City.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <v-card height="200" width="350" v-if="data !== undefined">
+      <v-list-item three-line>
+      <v-list-item-content>
+        <div class="text-overline">
+          {{ data.name }}, {{ data.sys.country }}
+        </div>
+        <v-list-item-title class="text-h3 font-weight-thin">{{ Math.round(data.main.temp) }} °C</v-list-item-title>
+        <v-list-item-subtitle>{{ data.weather[0].description }}</v-list-item-subtitle>
+      </v-list-item-content>
+
+      <v-list-item-avatar
+        tile
+        size="80"
+      >
+      <v-img :src="'http://openweathermap.org/img/wn/' + data.weather[0].icon + '@2x.png'" height="75" width="75"></v-img>
+      </v-list-item-avatar>
+    </v-list-item>
+    </v-card>
+    <v-skeleton-loader type="card" v-else></v-skeleton-loader>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import axios from "axios";
+
+@Component
+export default class City extends Vue {
+  @Prop({ required: true }) private readonly id!: number;
+
+  private created() {
+    this.getCurrentData();
+    this.getHourForecast();
+  }
+
+  private getCurrentData() {
+    axios
+      .get("https://api.openweathermap.org/data/2.5/weather", {
+        params: {
+          id: this.id,
+          units: "metric",
+          lang: "pl",
+          appid: process.env.VUE_APP_API_KEY,
+        },
+      })
+      .then((res) => {
+        this.$data.data = res.data;
+        console.log(res.data);
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  }
+
+  private getHourForecast() {
+    axios
+      .get("https://api.openweathermap.org/data/2.5/forecast", {
+        params: {
+          id: this.id,
+          units: "metric",
+          lang: "pl",
+          appid: process.env.VUE_APP_API_KEY, 
+        },
+      })
+      .then((res) => {
+        this.$data.forecast = res.data;
+        console.log('forecast', res.data);
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  }
+
+  private data() {
+    return {
+      data: undefined,
+      forecast: undefined,
+    };
+  }
+}
+</script>