Pokedex en VueJS desde cero
VueJS es un framework JavaScript muy versátil, sencillo de emplear, y con una gran comunidad que colabora día a día en mejorarlo. Hoy te traigo un breve tutorial sobre cómo empezar a programar un pokedex en VueJS desde cero.

Debido a lo sencillo que és, el código entero se encuentra en el gist al final de este post, y la explicación del mismo se encuentra intradocumentada. Exploraremos directivas básicas de VueJS para renderizar componentes HTML de manera dinámica.
De igual manera, exploraremos nociones básicas de reactividad de VueJS, o lo que es lo mismo, que la interfaz se adapte de manera automática a los cambios que sucedan en estructuras de datos tales como variables, objetos y arreglos en la sección javascript.
Instalación de paquetes y librerías necesarias
- Para proceder a ejecutarlo, es necesario tener instalado node en tu computador. Node te permitirá instalar posteriormente los paquetes necesarios mediante el gestor de paquetes npm.
- Una vez instalado, ejecuta un nuevo terminal y escribe el comando para instalar el cliente de VueJS (vue cli) que necesitarás para crear proyectos nuevos y ejecutar tu aplicación de modo local.
- Una vez instalado, crea el proyecto Pokedex en el directorio de tu preferencia. Un asistente te guiará durante el proceso e indicará cuando el directorio esté listo. Procura elegir compatibilidad con Vue 3 y Javascript. Si forzas que sea Typescript, no te servirá el Gist que se comparte mas adelante.
- Finalmente, modifica el archivo App.vue, podrás borrar todo su contenido, y reemplazarlo por el Gist compartido mas abajo.
- Finalmente, ejecuta tu pokedex de manera local empleando el comando npm run.
# Instala el cliente de Vue para crear
# y ejecutar aplicaciones de manera local
npm install -g @vue/cli
# Crea un proyecto llamado pokedex en
# el directorio que prefieras
vue create pokedex
# Tras reemplazar el archivo App.vue por el
# Gist compartido mas abajo, ejecuta npm run
# para probar la aplicación en modo local
npm run serve
Código fuente para programar tu Pokedex en VueJS desde cero
A continuación lee con detenimiento la documentación del gist compartido donde se encuentra el código para ejecutar tu pokedex en VueJS desde cero y comenzar a entender el funcionamiento de VueJS
Si te ha gustado, no dejes de comentar y compartirlo. Esto motiva a seguir creando mas contenido y en español para tu aprovechamiento.
Información: Pokedex y Pokemon son marcas registradas de Nintendo.