#GIPHY PHEW HOW TO#
#GIPHY PHEW INSTALL#
#GIPHY PHEW FREE#

Obviously, there are a lot of different ways to display the gifs in a better way, but I’ll leave that to you! In the next section, we will take what we have built so far, and deploy it to Netlify. We construct the URL by using ES6 template strings to combine several variables. What we need to do is to construct a URL using the endpoint, our API key, our searchTerm and a limit for how many gifs the API will return to us.

#GIPHY PHEW FREE#

Feel free to create an app on the giphy website if you wish to retrieve a private API key, but for now, the public one will do just fine. For demonstration purposes, we'll be using the public API key, which is dc6zaTOxFJmzC. A quick trip to the giphy documentation shows us that the endpoint for searching gifs is at. This will be done within our getGifs() method. To get data from giphy, we’ll need to know the endpoint from where to request this data, as well as an API key. We’re finally ready to actually retrieve some gifs! 3. You should see whatever you wrote in the input written to the console.

You can verify that everything is working by typing something in the input field, clicking the button, and opening up your console. Hooray! If you run into issues or have any questions, feel more than welcome to write a question below and we’ll sort it out. Visting (or whatever it says in your terminal) shows your brand new Vue project running, completely set up with hot reloading and sensible configurations.

To enter your newly created project, and run the Vue development server. When it is done, you can write cd gif-searcher & npm run serve Hit enter, and the CLI will set up your project for you (this might take a while). For the purpose of this tutorial, the defaults are fine. This will prompt you to use the default or choose your features manually. Next, we’ll use it to set up our project.

#GIPHY PHEW INSTALL#

We will be using the Vue-cli 3 beta, so if you have not already installed it, go ahead and grab it with npm by running this in your terminal: npm install -g if you receive an error about permissions, run the command again but with “sudo” in front I am by no means a Vue expert, but building this project taught me a lot of useful skills and I hope you will feel the same.

#GIPHY PHEW HOW TO#

We will cover setting up your Vue project using the Vue-cli, registering user input and use it to request gifs from the giphy API, displaying these gifs on the page, and finally how to put your app online using Netlify (which is awesome and super simple!). The guide is aimed at beginners with Vue and/or JavaScript, who wants to up their skills by building a “real-world” application and actually putting it online for other people to see. We will cover the following parts:įair warning - the hardest part of this project is not getting distracted by hilarious gifs when testing your app This will be a tutorial on how to fetch and display gifs with Vue, retrieved from the giphy API.

Welcome to this tutorial, I’m happy you made it here. Building a Gif Searcher with Vue and the Giphy API

Giphy phew