Skip to main content
The Pokedex Vue 3 application includes several reusable components that handle common UI patterns and functionality. These components follow Vue 3 Composition API best practices and are designed to be easily integrated throughout the application.

​
Available Components

Paginacion

Navigation controls for paginating through Pokemon lists with previous and next buttons

NumPost

Dropdown selector for controlling the number of items displayed per page

Favoritos

Display and manage favorite Pokemon with integration to Pinia store

VolverPokemons

Simple navigation button to return to the Pokemon list view

HelloWorld

Welcome component with Pokemon-themed branding and animations

​
Component Architecture

All components are built using Vue 3’s Composition API with <script setup> syntax, providing:
  • Type Safety: Better TypeScript support and type inference
  • Performance: Improved compilation and runtime performance
  • Simplicity: Less boilerplate code and cleaner component definitions
  • Composition: Easy integration with composables and Pinia stores

​
Usage Pattern

Components follow a consistent pattern for props and events: 
<script setup>
import ComponentName from '@/components/ComponentName.vue'

const handleEvent = (value) => {
  // Handle emitted event
}
</script>

<template>
  <ComponentName 
    :prop-name="propValue"
    @event-name="handleEvent"
  />
</template>

​
VolverPokemons

A simple button component that navigates back to the Pokemon list using Vue Router: 
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const volver = () => {
  router.push("/pokemons")
}
</script>

<template>
  <button @click="volver">Volver</button>
</template>

​
Welcome Components

​
HelloWorld

A welcome screen component featuring the Vue logo and Pokemon-themed branding with gradient text effects and smooth animations. Perfect for landing pages and introduction screens.

​
Next Steps

Pagination Component

Learn how to implement pagination controls

NumPost Component

Configure items per page selection

Build docs developers (and LLMs) love

Get started for freeTalk to us