Skip to main content

​
Getting Started

This guide will help you get the Pokedex application running on your local machine quickly. Make sure you’ve completed the Installation steps before proceeding.

​
Development Server

1

Start the Development Server

Run the following command in your project directory:
npm run dev
This starts the Vite development server with hot module replacement (HMR) enabled.
2

Open in Browser

Once the server starts, you’ll see output similar to:
VITE v6.0.5  ready in 432 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help
Open your browser and navigate to http://localhost:5173/
3

Explore the Application

You should now see the Pokedex application running! The home page displays a welcome screen with navigation links.
Vite provides instant Hot Module Replacement (HMR), so any changes you make to the code will be reflected in the browser immediately without a full page reload.

​
Application Features

Once the application is running, you can explore the following features: The application includes a top navigation bar with the following routes:

Home

Welcome page with general information

About

Information about the application

Pokemons

Browse all Pokemon with search and pagination

Favoritos

View your saved favorite Pokemon

​
Pokemon Browser

Navigate to /pokemons to access the main Pokemon browser:
1

Browse Pokemon

The Pokemon grid displays 20 Pokemon by default with official artwork images.
2

Search Pokemon

Use the search bar to filter Pokemon by name in real-time:
src/views/PokemonsView.vue
const searchQuery = ref('');

const filteredPokemons = computed(() => {
  if (!datos.value?.results) return [];
  
  if (searchQuery.value.trim() === '') {
    return datos.value.results;
  }
  
  const query = searchQuery.value.toLowerCase();
  return allPokemons.value.filter(pokemon => 
    pokemon.name.toLowerCase().includes(query)
  );
});
3

Adjust Pagination

Use the items per page selector to display 10, 20, or 50 Pokemon at a time.
4

Navigate Pages

Use the Previous/Next buttons to browse through pages of Pokemon.

​
Pokemon Details

Click on any Pokemon card to view detailed information:
  • Height and weight measurements
  • Abilities (clickable to see other Pokemon with same ability)
  • Pokemon number and types

​
Favorites System

The application uses Pinia for state management to handle favorites:
src/stores/favoritos.js
import { defineStore } from "pinia";
import { ref } from "vue"

export const useFavoritosStore = defineStore('favoritos',()=>{
  const favoritos=ref([]);
  
  const anyadir = (poke)=>{
    favoritos.value.push(poke.name);
  }
  
  const eliminar = (poke)=>{
    favoritos.value.splice(favoritos.value.indexOf(poke),1);
  }
  
  return {
    favoritos,
    anyadir,
    eliminar
  }
})
1

Add to Favorites

Click the “Añadir a favoritos” button on any Pokemon detail page.
2

View Favorites

Navigate to the Favoritos page to see all your saved Pokemon.
3

Remove from Favorites

Click “Quitar de favoritos” on any card in the Favorites page.

​
Building for Production

When you’re ready to build the application for production:
1

Run Build Command

npm run build
This command compiles and minifies the application for production deployment.
2

Preview Production Build

Test the production build locally:
npm run preview
This serves the production build on a local server for testing.
3

Deploy

The built files will be in the dist/ directory, ready to deploy to any static hosting service like Netlify, Vercel, or GitHub Pages.
The production build is optimized with:
  • Code splitting for better performance
  • Minified JavaScript and CSS
  • Optimized asset loading
  • Tree-shaking to remove unused code

​
Available Scripts

Here are all the npm scripts available in the project:
package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

dev

Starts the Vite development server with HMR

build

Builds the app for production to dist/ folder

preview

Previews the production build locally

​
Development Tips

Vue DevTools: Install the Vue DevTools browser extension for enhanced debugging. The project includes vite-plugin-vue-devtools for an even better development experience.

​
Hot Module Replacement

Vite’s HMR is extremely fast. When you save changes:
  • Vue components update instantly
  • State is preserved when possible
  • No full page reload needed

​
Path Aliases

The project uses @ as an alias for the src/ directory: 
// Instead of this:
import Component from '../../../components/Component.vue'

// You can write:
import Component from '@/components/Component.vue'

​
Composables Pattern

The application uses composables for shared logic. For example, API calls:
src/composables/useGetData.js
import axios from 'axios'
import { ref } from 'vue'

export const useGetData=()=>{
  const datos=ref(null);
  const cargando = ref(true);
  const error = ref(false);

  const getData = async (url) => {
    try {
      const resultado = await axios.get(url);
      datos.value = resultado.data;
    }
    catch (err) {
      console.log(err);
      error.value = true;
    } finally {
      cargando.value = false;
    }
  };
  
  return {
    getData,
    datos,
    error,
    cargando
  }
};
Use it in your components: 
import { useGetData } from '@/composables/useGetData';

const { getData, datos, error, cargando } = useGetData();
getData('https://pokeapi.co/api/v2/pokemon/pikachu');

​
Live Demo

View Live Application

Check out the live deployed version of this application on Netlify

​
Troubleshooting

  • Check if port 5173 is already in use
  • Verify Node.js version is 16.x or higher
  • Try deleting node_modules and running npm install again
  • Check your internet connection (images are loaded from PokeAPI)
  • The app includes fallback images for failed loads
  • Open browser console to check for specific errors
Favorites are stored in memory and will reset when you refresh the page. To persist favorites, you could:
  • Add localStorage support to the Pinia store
  • Implement a backend API for user accounts
  • Ensure you’re using a modern browser
  • Check for any console errors
  • Try restarting the dev server
  • Clear browser cache

​
Next Steps

Now that you have the application running, explore the codebase to learn more:
  • Study the router configuration in src/router/index.js
  • Examine component composition in the views
  • Learn about Pinia stores in src/stores/favoritos.js
  • Experiment with adding new features!
Remember that the favorites feature stores data in memory only. Refreshing the page will clear your saved favorites.

Build docs developers (and LLMs) love

Get started for freeTalk to us