Getting Started with Vue.js

Getting Real Data with HTTP

For our next few lessons we'll be using the Giphy API to grab gifs and use them inside of our Vue application.

Giphy API Key

The Giphy API requires you register in order to get an API key and access the API. It's all free for sandbox apps so go ahead, make an account and get a key.

The URL to access trending gifs is:

http://api.giphy.com/v1/gifs/trending

You'll need to attach your api key using a URL parameter like so:

http://api.giphy.com/v1/gifs/trending?api_key=my-api-key-here

You can visit this in your browser and see a JSON array of gifs! Now we can use this URL in our Vue app.

Starting Vue

We'll create a Vue instance with our Giphy url and credentials:

const app = new Vue({
  el: '#app',

  data: {
    apiUrl: 'http://api.giphy.com/v1/gifs',
    apiKey: '80bfcbf357864cd18518c324f47a7098' // my test key. dont go crazy using this ;)
  },

  methods: {

  },

  created: function() {

  }
});

We have the apiUrl and apiKey defined in our data object so that we can reference it throughout this Vue instance.

Fetching Gifs

There are a few ways we can use that URL to get the gifs. We can use a library like axios or we can use JavaScript's fetch. fetch works with modern browsers but for older support, I'd recommend working with axios.

The syntax for using axios or fetch will be similar as they both return promises. Add this to our methods:

...
methods: {
    fetchGifs: function() {
        const url = `${this.apiUrl}/trending?api_key=${this.apiKey}`;

        fetch(url)
            .then(response => response.json())
            .then(data => this.gifs = data.data);
    }
},
...

We are building our trending url using ES6 template strings and the data variables we have. We will then use fetch with our new url to bind the gifs to our gifs variable.

Feel free to console.log() the response to see exactly what Giphy returns. You can also visit the Giphy docs as they show the format of the data.

We also need to tell Vue that we'll be using a gifs variable. Let's create that on the data object:

...
data: {
    apiUrl: 'http://api.giphy.com/v1/gifs',
    apiKey: '80bfcbf357864cd18518c324f47a7098',
    gifs: null 
},
...

We'll start gifs as null. This is good practice to let Vue know we'll be using this variable, but we don't know what it is just yet

Getting Gifs on Load

We have our gifs data variable. We have our fetchGifs method. Next, we need to use fetchGifs somewhere. We want to grab all gifs when a user lands so we'll use Vue's created lifecycle hook.

const app = new Vue({
      el: '#app',

      data: {
        // ...
      },

      methods: {
        // ...
      },

      created: function() {
        this.fetchGifs();
      }
});    

Showing Those Gifs

Now that those gifs are bound to the gifs variable, we can show it in our template:

<div v-if="gifs" v-for="gif in gifs">
    <img :src="gif.images.original.url">
</div>

That's it! Vue will automatically loop over the gifs and show the images for each. We only want to show this section if gifs have been grabbed. This is why we use v-if.

We are looping over the gifs array using the v-for directive.

You can inspect the gif object to see what url you'd like to use. We're using gif.images.origina.url here, but you'll see there are many other types of images Giphy provides.