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 ``` ## 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: ``` ``` **Final gif picker result** ![Giphy gif picker final result image with a button to open gif picker, gif picker listing gifs with options to get trending gifs and search gifs.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qozesyg9nftxg8mcb464.png) GitHub Gist: [https://gist.github.com/sarinmsari/e2a47f457a1b5924ba4e5791b954ca88](https://gist.github.com/sarinmsari/e2a47f457a1b5924ba4e5791b954ca88)

sarinmsari

Tutorial: Giphy gif picker (Vue3)

Join Our Newsletter. No Spam, Only the good stuff.