JSFiddle - React, Tailwind, and code Playground

by Kirill Krasin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<div id="app">
<section v-if="errored">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
<div v-if="loading">Loading...</div>

<h1>{{ info.name }}</h1>
    <h2>{{ info.developer }} / {{ info.publisher }}</h2>
<small class="appid">Steam AppID: {{ info.appid }}</small>
<a v-bind:href="info.translate_url"> {{ info.translate_url }} </a>
</section>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      info: null,
      loading: true,
      errored: false
    };
  },
mounted() {
    axios
      .get('https://api.gametranslation.net/app/280')
      .then(response => {
        this.info = response.data;
      })
      .catch(error => {
        console.log(error);
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  }
});