GIF Picker

This GIF Picker component is a component that enables users to search for GIFs using the Tenor API.

When users search a GIF, the component sends a request to the Tenor API with the provided search term

By default, the component displays categories to help users search GIFs

The component also handles loading with a skeleton glowing effect and an error message when it cannot contact the API

How to get your Tenor API

To use this component, you will need to get an API key in order to get GIFs from the Tenor API :

• developers.google.com/tenor

Example Usage

Note: This example does not use an api-key which is required so it only shows some example categories

arrow_back

search

<template>
  <GifPicker api-key="<your-api-key>" @gifSent="handleGif"></GifPicker>
</template>

<script setup lang="ts">
  import {GifPicker} from "vue-gif-emoji-picker";
  import type {Gif} from "vue-gif-emoji-picker";
  import 'vue-gif-emoji-picker/dist/style.css'; // not needed if imported globally

  function handleGif(gif: Gif) {
    console.log(gif);
  }
</script>

Reference

Here are the properties that can be applied to the component

Properties

Name	Type	Default	Description
api-key	string	null	Tenor API Key

Events

Name	Parameters	Description
gifSent	Gif	Gif returned when clicked

Gif Object

Name	Parameters	Description
content_description	string	Description of the gif
url	string	URL of the gif