Tutorial: Giphy gif picker (Vue3)

Claudio Ctin3 months ago8 mins

I hope you have a basic understanding of Vue3 and Tailwind CSS.

Step 1: Setup Vue 3 Project

Ensure you have a basic Vue 3 project set up. If not, you can create one using Vue CLI:

 vue create my-project
 cd my-project

Step 2: Install Giphy Packages

Install the required Giphy packages using npm or yarn:

# Using npm
npm install @giphy/js-fetch-api @giphy/js-components

# Or using yarn
yarn add @giphy/js-fetch-api @giphy/js-components

Step 3: Create Home Page Component

Create a Home.vue component to serve as the main page for the GIF picker:

//Home.vue
<script setup>
import {ref} from ‘vue’
import GifPicker from ‘@/components/giphy/GifPicker.vue’;

let showGifPicker = ref(false);
let gifUrl = ref(”);

const handleGifSelection = (gif) => {
showGifPicker.value = false;
gifUrl.value = gif;
}
</script>

</div>
</template>

Step 4: Create the GifPicker Component

Create a GifPicker.vue component to handle GIF selection:

Let’s work on the gif picker scripting

Setup Imports and Initialization
Import necessary modules and initialize required variables:

const emit = defineEmits([‘handleGifSelection’])

let gifs = ref(null),
searchTerm = ref(”),
grid = null;

const gf = new GiphyFetch(‘your Web SDK key’) // update your giphy key

const fetchGifs = (offset) => {
if (searchTerm.value) {
return gf.search(searchTerm.value, { offset, limit: 25 })
}
return gf.trending({ offset, limit: 25 })
}
Create Grid Rendering Function
Define a function to render the GIF grid:

const makeGrid = (targetEl) => {
const render = () => {
return renderGrid(
{
width: 226,
fetchGifs,
columns: 2,
gutter: 6,
noLink: true,
hideAttribution: true,
onGifClick,
},
targetEl
)
}
const remove = render()
return {
remove: () => {
remove()
},
}
}

Handle GIF Clicks
Define a function to handle GIF clicks and emit the selected GIF URL:

const onGifClick = (gif, e) => {
e.preventDefault();
emit(‘handleGifSelection’, gif.images.fixed_height.url);
}
Handle Grid Refresh and Fetch New GIFs
Define functions to refresh the grid and fetch new GIFs based on search or trending clicks:

const clearGridAndFetchGifs = () => {
grid.remove();
grid=makeGrid(gifs.value)
}

const handleGifSearch = debounce(() => {
clearGridAndFetchGifs();
},500)

const handleTrendingClick = () => {
searchTerm.value = ”;
clearGridAndFetchGifs();
}

Initialize Grid on Component Mount
Initialize the grid when the component is mounted:

 onMounted(() => {
 grid = makeGrid(gifs.value)
 })

Final GifPicker Component
Combine all the pieces into the final GifPicker component:

const emit = defineEmits([‘handleGifSelection’])

let gifs = ref(null),
searchTerm = ref(”),
grid = null;

const gf = new GiphyFetch(‘your Web SDK key’) // update your giphy key

onMounted(() => {
grid = makeGrid(gifs.value)
})

const fetchGifs = (offset) => {
if (searchTerm.value) {
return gf.search(searchTerm.value, { offset, limit: 25 })
}
return gf.trending({ offset, limit: 25 })
}

const onGifClick = (gif, e) => {
e.preventDefault();
emit(‘handleGifSelection’, gif.images.fixed_height.url);
}

const handleGifSearch = debounce(() => {
clearGridAndFetchGifs();
},500)

const handleTrendingClick = () => {
searchTerm.value = ”;
clearGridAndFetchGifs();
}

const clearGridAndFetchGifs = () => {
grid.remove();
grid=makeGrid(gifs.value)
}

</script>

Final gif picker result

GitHub Gist: https://gist.github.com/sarinmsari/e2a47f457a1b5924ba4e5791b954ca88

Please follow and like us: