Learning Vue.js through Pokemon

This repo contains the code for my tutorial series 'Vue.js explained through Pokemon'.

This is a continuation on Vue.js Pokemon Battle tutorial where I dig a little deeper and explain several other features that Vue.js offers.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Published articles

#1 Single file components

Article | Branch

This tutorial shows how to setup a work flow to use single file components, splits the previous code base into 2 components and touches on computed properties.

#2 Attack functionality: $refs, Promisses & events

Article | Promise based implementation | Event based implementation

The second installment brings back the attack functionality. 2 different implementations are discussed to explain $refs, promises & events.

#3 Implementing Vuex

Article | Branch

In this tutorial we're separating our state into a global state store.

#4 Damage calculations

Article | Branch

Traditional pokemon attack damage calculations gets discussed in this article, we implement this through a Damage class.

#5 Transition & animation

Article | Branch

Let's make use of Vue transition when pokemon appear/faint and add some textual info when an attack is, for example, super effective through resuable transition.

Roadmap

Note This can always change in the future

• Testing our components
• Switching pokemon: vue-router
• Expanding on attacks: status effects
• Implementing items