Getting Started with Vue.js: Lesson 16 of 25

Getting Real Data with HTTP

Up Next

Styling Gifs and Author Overlays

Autoplaying in 7 seconds!

Cancel

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.

Table of Contents

    Accessing the Giphy API Trending

    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.

    Chris Sevilleja

    173 posts

    Co-founder of Scotch.io. Slapping the keyboard until something good happens.