JSFiddle - React, Tailwind, and code Playground

by Felipe Gibran Eleuterio Toledo

HTML

<div id="app">
  <api-request 
    :resource="$api.giphyRandom" 
    v-model="myResponse"
  >
    <img v-if="myResponse" :src="myResponse.data.data.image_url"/>
  </api-request>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-api-request@latest/dist/vue-api-request.min.js"></script>

CSS

@import url(https://unpkg.com/vue-api-request@latest/dist/vue-api-request.min.css)

JavaScript

var api = {
    giphyRandom: function () {
      return axios.get('//api.giphy.com/v1/gifs/random', {
        params: {
          api_key: 'ceea3d73eee446f48e2a645e117b1f31'
        }
      })
    }
  };

  VueApiRequest.setAPI(api);
  Vue.use(VueApiRequest);

  new Vue({
    el: '#app',
    data: {
      myResponse: null
    }
  })