srcassets # Stuff like images are stored here       logo.png components # Independent "bricks" of app       weatherWidget.vue services # Code that works with API. Axios gets data from API here       service.js views # Views are like pages. Router navigates through them       About.vue       Home.vue App.vue # Root Vue component constants.js # Just some constants that I want to store main.js # Core JS file that imports and mounts our app router.js # Router config is here store.js # Store management with Vuex

import Vue from "vue"; // Vue libimport App from "./App.vue"; // Our root componentimport router from "./router"; // Router configimport store from "./store"; // Store configimport "normalize.css"; // Normalize.css lib to reset default stylesVue.config.productionTip = false;new Vue({  router,  store,  render: h => h(App)}).$mount("#app"); // Create Vue instance and mount it in index.html -> #app element

const API_KEY = "b60f3577e8eb46f089853e2a9fd7d744";const CURRENT_WEATHER = `https://api.weatherbit.io/v2.0/current?city=Kiev,UA&key=${API_KEY}`;export { API_KEY, CURRENT_WEATHER }; // export constant to be able to use them in components

import Vue from "vue";import Router from "vue-router";import Home from "./views/Home.vue"; // import components that you wish to became RoutesVue.use(Router); // tell Vue to action with Routerexport default new Router({  mode: "history",  base: process.env.BASE_URL,  routes: [ // All the routes are described here    {      path: "/",      name: "home",      component: Home    },    {      path: "/about",      name: "about",      // route level code-splitting      // this generates a separate chunk (about.[hash].js) for this route      // which is lazy-loaded when the route is visited.      component: () =>        import(/* webpackChunkName: "about" */ "./views/About.vue")    }  ]});

import Vue from "vue";import Vuex from "vuex";import service from "@/services/service.js"; // service.js fetch data from API. We will have a look at it in the next step.Vue.use(Vuex); // tell Vue to action with Vuexexport default new Vuex.Store({  state: { // define here data that you wish to store    weather: {},    dataIsRecived: false  },  mutations: { // change state from here    UPDATE_WEATHER(state) {      service        .getWeather() // call the function from service.js that returns the data from API        .then(response => { // if the response was get          state.weather = response.data.data[0]; // set weather obj in state to real weather obj          state.dataIsRecived = true; // mark that data was recived          console.log(response); // and log it        })        .catch(error => { // if there was an error          console.log("There was an error:", error.response); // log it          state.dataIsRecived = false; // and mark that data wasn't recived        });    }  },  actions: { // call mutations that change the state here    updateWeather(context) {      context.commit("UPDATE_WEATHER");    }  }});

import axios from "axios";import { CURRENT_WEATHER } from "@/constants"; // URL with queries and API keyconst apiClient = axios.create({ // create promise  baseURL: CURRENT_WEATHER,  withCredentials: false, // CORS  headers: { // some HTTP headers    Accept: "application/json",    "Content-Type": "application/json"  }});export default {  getWeather() { // function that is used in store.js     return apiClient.get();  }};

<template>  <div id="app"> // root    <div class="nav"> // navbar      <router-link to="/" class="nav__link">Home</router-link>      <router-link to="/about" class="nav__link">About</router-link>    </div>    <router-view /> // router views will be rendered here  </div></template><style lang="scss"> // some styles   @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400&display=swap&subset=cyrillic');  body {    font-family: 'Montserrat', sans-serif;    max-height: 100vh;  }  a {    color: #153B50;    text-decoration-color: rgba($color: #153B50, $alpha: 0.5);    transition: all 0.3s ease;    &:hover {      text-decoration-color: #153B50;    }  }  .nav {    display: flex;    justify-content: center;    align-items: center;    padding: 15px 0;    position: absolute;    top: 0;    left: 0;    width: 100%;  }  .nav__link {    &:not(:last-child) {      margin-right: 15px;    }  }</style>

<template>  <div class="about">    <p>Thanks <a href="https://www.weatherbit.io/">Weatherbit</a> for public API!</p>  </div></template><style lang="scss" scoped> // some styles   .about {    display: flex;    justify-content: center;    align-items: center;    height: 100vh;  }</style>

<template>  <div class="home">    <weatherWidget />  </div></template><script>import weatherWidget from '@/components/weatherWidget.vue'; // import componentexport default {  name: "home",  components: { // and register it    weatherWidget  }}</script><style lang="scss" scoped> // some styles   .home {    display: flex;    justify-content: center;    align-items: center;    height: 100vh;  }</style>

<template>  <div>    <div v-if="this.$store.state.dataIsRecived" class="weather-widget"> // widget itself      <p class="weather-widget__city">{{ weather.city_name }}</p>      <h2 class="weather-widget__temp">{{ weather.temp }}<span>C</span></h2>      <p class="weather-widget__status">{{ weather.weather.description }}</p>    </div>    <div v-else class="weather-widget"> // preloader      <img src="spinner.svg" alt="">    </div>  </div></template><script>  export default {    computed: {      weather() {        return this.$store.state.weather // gets weather state from Vuex store      }    },    created() {      this.$store.dispatch("updateWeather"); // dispatch "updateWeather" when component is created    }  }</script><style lang="scss" scoped> // some styles   .weather-widget {    display: flex;    flex-direction: column;    align-items: center;    color: #429EA6;  }  .weather-widget__city {    font-size: 20px;    margin: 0;  }  .weather-widget__temp {    display: flex;    align-items: flex-start;    color: #16F4D0;    font-size: 200px;    font-weight: 200;    margin: 0;    span {      font-size: 30px;      font-weight: 400;      margin-top: 35px;    }  }  .weather-widget__status {    font-size: 20px;    margin: 0;  }</style>