NUXT_FRONTEND/components/Header/InfoVidget.vue

<template>
  <ul class="header-center__info-list">
    <li v-if="value.weather" class="header-center__info-item">
      <nuxt-link to="/news/weather" title="Погода в Алтайском крае">
        <span class="header-center__info-link">{{value.weather}}°, Барнаул</span>
      </nuxt-link>
    </li>
    <v-skeleton-loader
      v-else
      class="mx-auto"
      width="80"
      type="text"
    ></v-skeleton-loader>
    <li v-if="value.USD" class="header-center__info-item">
      <span class="header-center__info-link" :class="(value.USD_dynamics === 'down' ? 'header-center__info-link_down' : '')"
      id="USD">$&nbsp;{{value.USD}}</span>
    </li>
    <v-skeleton-loader
    v-else
      class="mx-auto"
      width="50"
      type="text"
    ></v-skeleton-loader>
    <li v-if="value.EUR" class="header-center__info-item">
      <span class="header-center__info-link" :class="(value.EUR_dynamics === 'down' ? 'header-center__info-link_down' : '')"
        id="EUR">€&nbsp; {{value.EUR}}</span>
    </li>
    <v-skeleton-loader
    v-else
      class="mx-auto"
      width="50"
      type="text"
    ></v-skeleton-loader>
    <li v-if="value.CNY" class="header-center__info-item">
      <span class="header-center__info-link" :class="(value.CNY_dynamics === 'down' ? 'header-center__info-link_down' : '')"
            id="CNY">Ұ&nbsp; {{value.CNY}}</span>
    </li>
    <v-skeleton-loader
      v-else
      class="mx-auto"
      width="50"
      type="text"
    ></v-skeleton-loader>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      value: {
        EUR: '',
        EUR_dynamics: '',
        USD: '',
        USD_dynamics: '',
        CNY: '',
        CNY_dynamics: '',
        weather: '',
        wind: ''
      }
    }
  },
  created() {
    let weather = this.$axios.get('https://api.amic.ru/api/v1/informer/weather')
    .then(res => {
      this.value.weather = res.data.data.current_temp_c;
      return res
    });
    let currencies = this.$axios.get('https://api.amic.ru/api/v1/informer/currencies')
    .then(res => {
      this.value.USD = res.data.data.USD.value;
      this.value.EUR = res.data.data.EUR.value;
      this.value.CNY = res.data.data.CNY.value;
      this.value.USD_dynamics = res.data.data.USD.dynamics;
      this.value.EUR_dynamics = res.data.data.EUR.dynamics;
      this.value.CNY_dynamics = res.data.data.CNY.dynamics;
      return true
    })
  }
};

</script>

<style>

</style>