Building a Pokédex with Vue.js and PokéAPI - A Step-by-Step Guide
#vue#javascript#webdev#pokemon
Batiar Rahmamulia

Batiar Rahmamulia @batiar_rahmamulia

About: Software Engineer

Location:
Indonesia
Joined:
Mar 7, 2025

Building a Pokédex with Vue.js and PokéAPI - A Step-by-Step Guide

Publish Date: Mar 20
2 0

Hey there! 👋 Let me walk you through how I built a Pokédex using Vue.js and PokéAPI. This project is perfect for learning Vue.js basics while creating something fun!

Prerequisites

  • Node.js installed
  • Basic knowledge of Vue.js
  • Basic understanding of REST APIs ## Step 1: Project Setup First, let's create a new Vue project using Vite: 
npm create vite@latest vue-vite-pokedex -- --template vue
cd vue-vite-pokedex
npm install
Enter fullscreen mode Exit fullscreen mode

Step 2: Adding Dependencies

We'll need Bootstrap for styling:

npm install bootstrap
Enter fullscreen mode Exit fullscreen mode

Add Bootstrap to your main.js :

import 'bootstrap/dist/css/bootstrap.min.css'
Enter fullscreen mode Exit fullscreen mode

Step 3: Creating the Base Structure

Let's start with our component's data structure:

data: () => ({
  pokemonList: [],
  viewedAsDetail: false,
  pokemonDetail: "",
  search: "",
  suggestedPokemon: ""
})
Enter fullscreen mode Exit fullscreen mode

Step 4: Implementing API Calls

We'll create two main methods for fetching Pokémon data:

  1. Fetching initial Pokémon list: 
async mounted() {
  const pokeData = await fetch('https://pokeapi.co/api/v2/pokedex/2/')
    .then(response => response.json())

  pokeData.pokemon_entries.forEach(item => {
    this.getEachPokemon(item)
  })
}
Enter fullscreen mode Exit fullscreen mode
  1. Fetching individual Pokémon details: 
async getEachPokemon(result) {
  let response = await fetch('https://pokeapi.co/api/v2/pokemon/'+result.entry_number);
  let data = await response.json();
  this.pokemonList.push(data)
  this.pokemonList.sort((a,b) => a.id - b.id)
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Building the UI Components

  1. Create the search bar: 
<div class="row justify-content-center mt-5 text-white">
  <div class="col-6">
    <input type="text" class="form-control" placeholder="search pokemon" v-model="search">
    <!-- Suggestions will appear here -->
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  1. Add the Pokémon grid: 
<div class="row px-5">
  <div class="col-12 col-md-4 col-lg-3 mb-3" v-for="pokemon in pokemonList">
    <div class="card text-center">
      <img :src="pokemon.sprites.other.home.front_default" :alt="pokemon.name">
      <div class="pokemon-name">{{pokemon.name}}</div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 6: Implementing Search Functionality

Add a watch method for real-time search:

watch: {
  search() {
    const searchTerm = this.search.toLowerCase();
    let filteredPokemon = this.pokemonList.filter(item => {
      return item.name.toLowerCase().includes(searchTerm)
    })
    this.suggestedPokemon = filteredPokemon.slice(0,3)
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 7: Styling with Glass-morphism

Add these CSS styles for the glass effect:

.card {
  background: rgba(255, 255,255,0.21);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
  backdrop-filter: blur(9px);
  border-left: 2px solid rgba(255, 255,255,0.50);
  border-right: 2px solid rgba(255, 255,255,0.50);
}
Enter fullscreen mode Exit fullscreen mode

Step 8: Adding Animations

Implement hover effects and transitions:

.card {
  cursor: pointer;
  transition: transform 0.2s;
}
.card:hover {
  transform: translateY(-5px);
}
Enter fullscreen mode Exit fullscreen mode

Testing and Debugging

  1. Test the search functionality with different Pokémon names
  2. Verify that all Pokémon images load correctly
  3. Check responsive design on different screen sizes
  4. Test the detail view for various Pokémon ## Common Issues and Solutions
  5. Image Loading : Some Pokémon might not have front_default sprites. Add fallback images: 
<img :src="pokemon.sprites.other.home.front_default || 'fallback-image.png'" :alt="pokemon.name">
Enter fullscreen mode Exit fullscreen mode
  1. API Rate Limiting : Implement delay between requests: 
await new Promise(resolve => setTimeout(resolve, 100))
Enter fullscreen mode Exit fullscreen mode

Conclusion

This project demonstrates how to build a modern web application with Vue.js while working with external APIs. The glass-morphism design adds a contemporary touch, and the search functionality makes it practical to use.

Next Steps

Consider these enhancements:

  1. Add pagination for better performance
  2. Implement type filtering
  3. Add more Pokémon details
  4. Include evolution chains
  5. Add loading states The complete code is available on GitHub, and you can see the live demo here.

Comments 0 total

    Add comment